polar bear lamps

Once again, more css drop downs.

I was recently asked to look into putting in a drop down menu on one of our clients' soon-to-be developed sites. I really didn't want to rely on prior popular methods such as suckerfish because I didn't feel they were dynamic enough for what we do. I dislike relying on custom javascript and having to make sure the navigation's id's are set the same in the js and css. However, knowing that we make use of the IE7 javascript on our sites, I decided to see if a drop down would work in IE6 considering the added support for pseudo and other class types.

Well, it worked, and it's really basic. Ridiculously basic enough that I'm sure many of you would've done the same thing but there are still folks out there who are continuing to learn. The advantage of it being so basic is that it's infinitely dynamic. There's no need to make sure you have set any id's properly or anything else of the sort. Code to follow.

<div id="nav_container">
<ul>
    <li><a href="#">random stuff</a></li>
    <li><a href="#">more random stuff</a></li>
    <li><a href="#">other random stuff</a>
    <ul>
        <li><a href="#">random stuff</a></li>
        <li><a href="#">more random stuff</a>
        <ul>
            <li><a href="#">more random stuff</a></li>
            <li><a href="#">other random stuff</a></li>
            <li><a href="#">things and things</a></li>
        </ul></li>
        <li><a href="#">other random stuff</a></li>
        <li><a href="#">some other things</a></li>
    </ul></li>
    <li><a href="#">some thing</a></li>
</ul>
</div>

And now the styles

#nav_container {
margin: 0;
padding: 0;
position: relative;
}

#nav_container ul li {
display: inline;
height: 100%; /* fixes height bug in IE */
}

#nav_container ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 200px;
border: 1px solid #999;
}

#nav_container ul ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 200px;
}

/* must use direct child to prevent all menus from opening at once */
#nav_container ul li:hover > ul { 
display: block;
position: absolute;
margin: -20px 0 0 190px;
}

#nav_container ul li a {
padding: 5px 20px;
color: #fff;
background: #666;
display: block;
width: 160px;
color: #333;
}

#nav_container ul li a:hover {
background: #ffee00;
}

And now the final product

Widths, colors, etc, can be modified to whatever end of course. This includes floating the top level anchors for a horizontal menu

permalink - 0 Comments