I'm creating a CSS drop down menu which is going well so far, however I have a problem with the width the <li>
or <a>
in the sub menu.
If you hover over 'About Us' you'll all of the sub menu links are different widths. I've tried setting both elements to width: 100%
but I'm guessing the problem is something to do with the <ul>
being absolutely positioned and not having a fixed width.
Could you please point me in the right direction to fix this.
NOTE: This probably won't work in earlier versions of IE yet, that's something I'm going to be working on next
See this updated jsFiddle
Set the width of it to be auto. I have also included a z-index so it renders above the other elements
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">In The News</a></li>
</ul></li>
<li><a href="#">Our Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Resellers</a></li>
<li><a href="#">Our Contact</a></li>
</ul>
</div>
CSS
body{font: 13px verdana; margin: 10px}
#main-nav ul, #main-nav ul li ul {list-style: none; margin: 0; padding:0;}
#main-nav ul li{
display: block;
float: left;
position: relative;
}
#main-nav ul li a{
display: block;
height: 35px;
line-height: 35px;
background: lightblue;
padding: 0 10px;
color: black;
text-decoration: none;
}
#main-nav ul li a:hover{background: #EEE}
#main-nav ul li:hover ul{left: 0px;}
/* This is the bit I'm having a problem with */
#main-nav ul li ul{
position: absolute;
left: -9999px;
top:35px;
background: lightblue;
}
#main-nav ul li ul li {white-space: nowrap; width: 100%; z-index: 999}
try using: width: auto;
instead of width: 100%;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.