I searched the code needed to build a dropdown menu in CSS. What I found was a functional menu, but that was left aligned. Then I tried to align elements to the center using CSS. I was able to center the menu, but the sublinks were strange, see the image.
BeingthatIchoseayellowbackgroundcolorforthepurposemenu.I'llputheretheCSSandHTMLcode:
HTML
<html><head><title></title></head><body><ulclass="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Link1</a>
<ul>
<li><a href="#">Sub1</a></li>
<li><a href="#">Sub2</a></li>
</ul>
</li>
<li><a href="#">Link2</a></li>
</ul>
</body>
</html>
CSS
body{
font-size:16px;
}
.menu{
list-style: none;
width: 25em;
background: yellow;
margin-left: auto;
margin-right: auto;
}
.menu li{
position: relative;
float:left;
}
.menu li a{
background: red;
color:#fff;
text-decoration:none;
padding:14px 20px;
display:block;
}
.menu li a:hover{
background:darkred;
color: #fff;
text-shadow:0px 0px 5px red;
}
.menu li ul{
position: absolute;
top:45px;
left:0;
background-color: yellow;
display:none;
}
.menu li:hover ul, .menu li.over ul{
display:block;
}
.menu li ul li{
border:1px solid #c0c0c0;
display:block;
width:100px;
}
NOTE:
The css is embedded in html because it is just a page with this menu ...Is the technique to centralize wrong? What can I do to centralize this menu?