Center dropdown menu in css

0

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?

    
asked by anonymous 14.09.2016 / 18:51

1 answer

0

To center the menu, I used the flex display, which was suggested in the comments. The problem persisted, but I discovered that it was due to a series of adjustments, for example the yellow background was not only in .menu, in addition I adjusted the position and width of the sublink boxes.

    
14.09.2016 / 19:30