Full On Design

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