Variable width drop-down menu
July 30, 2009 - 12:53pm
fix
Float your sub ul and sub lis left.
ul.primary-nav li ul.sub-menu
{
display: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
{
display: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
margin-left: -1px;
background-color: #eeeeee;
float: left;
}
ul.primary-nav li ul.sub-menu li
{
position: relative;
border: none;
float: left;
clear: left;
}
If you need a border between sub lis, you will have to use a repeating background image on ul.sub-menu
Hey, I'm building a CSS drop-down menu for a client. This is the first time I've done this, and I've got everything working, but I'd like the sub-menu to be variable width. In otherwords, I'd like the whole thing to expand to encompass the longest link. Right now I'm having to set a width on the anchors, like so:
ul.primary-nav li ul.sub-menu li a {display: block;
height: 30px;
width: 150px;
}
Right now, if I remove the
width: 150pxdeclaration, the whole sub-menu (ul.sub-menu) collapses to the size of the parent<li>link.Anyone know how to make this work the way I want it to? So that
ul.sub-menuwill expand to encompass the largest<li>anchor in the list?Blessings,
Anthony Pero
http://www.myspace.com/anthonypero