Easy CSS Drop down list

About the Author

Mike Rogers is a Web Developer who is currently at University studying Web Technologies. He also is the founder of Full On Design. He has several years experience freelancing and you can follow him on Twitter (Rogem002).

Here is a really easy way to make a drop down list using CSS instead of JavaScript. This has many advantages over a JavaScript method, mainly it’s more search engine friendly and does not rely on users having JavaScript turned on.

Example

Click here to see Live Demo

The Code

<style type="text/css">

<!--

/* Style the links */

#exmaplebox a {

    float:left;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    height: 22px;

    width: 100px;

    text-align:center;

    display:block;

    padding: 0 10px 0 10px;

    margin: 2px 10px;

    border:1px solid #CCC;

}

#exmaplebox a:hover {

    text-decoration:underline;

}

/* this bit is the drop down bit */

#exmaplebox ul {

    float:left;

    margin:0;

    padding:0;

    height: 26px;

    width: 150px;

    overflow:hidden;

    list-style:none;

}

#exmaplebox ul:hover {

    overflow:visible;

}

#exmaplebox ul li {

    float:left;

    width:300px;

    margin:0;

    padding:0;

}

-->
</style>
<div id="exmaplebox">

<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>

<a href="#link">Link</a>
</div>

Download the Code

Posted March 2nd, 2009