Drop down width same as parent
13,088
Here's how I made it look like this:
Just modify these rules:
.head-link ul li {
position: relative;
... /* Keep all current rules */
}
.head-link ul li ul {
width: 100%;
... /* Keep all current rules */
}
Comments
-
lukeseager almost 2 years
I'm creating a drop down menu, the top level list item will display a username.
I have a bit of an issue because I want the dropdown menu to be the same width at the top level list item being hovered over.
However, if I set
ul
li
ul
li
to width 100%, it takes 100% of the overall container, not of theul
above it. I think becauseul
ul
's are position absolute?Any ideas how I can make the drop down menu's the same width as the parent list item?
and here's the HTML
<ul> <li><a href="#"><span aria-hidden="true" data-icon="a"> A long name here</a> <ul> <li><a href="#">View Profile</a></li> <li><a href="#">Edit Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">My Payments</a></li> </ul> </li> <li><a href=""> <span aria-hidden="true" data-icon="c"> Online</a></li> <li><a href="#"> Log Out</a></li> </ul>
CSS
.head-link ul ul { display: none; } .head-link ul li:hover > ul { display: block; } .head-link ul { list-style: none; position: relative; display: inline-table; } .head-link ul li { float: left; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; height: 2em; width: auto; padding: 0.5em 0.98em; } .head-link ul li:hover { background: #ffffff; } .head-link ul li:hover a { color: #434343; border-bottom: none; } .head-link ul li a { display: block; color: #ffffff; text-decoration: none; } .head-link ul ul { background: #ffffff; border-radius: 0px; padding: 0; position: absolute; top: 99%; left: 0; text-align: left; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; padding-bottom: 0.8em; padding-top: 0.5em; box-shadow: 0px 0.3em 0.4em rgba(0,0,0,0.3); } .head-link ul ul li { float: none; position: relative; padding: 0em; } .head-link ul ul li a { padding: 0.5em 1.24em; color: #434343; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; } .head-link ul ul li a:hover { background: #ffffff; text-decoration: underline; } .head-link ul ul ul { position: absolute; left: 100%; top:0; }