Hovering Dropdown Menus

I was getting very concerned about how to achieve the dropdown menu I wanted for the navigation area. I couldn’t find a solution in any of the textbooks I’ve been using.

I did a search on menus and navigation and it took some time, but I finally found a workable solution on http://www.alistapart.com/articles/horizdropdowns/

It was a surprisingly easy process; where the on-hover menu is nested inside a list item (the link that is being hovered over).

The HTML code looks like this:

<div id=”menu”>
<ul>
<li>profile
<ul>
<li><a href=”awards.html”>awards</a></li>
<li><a href=”exhibitions.html”>exhibitions</a></li>
<li><a href=”publications.html”>publications</a></li>
</ul>
</li>
<li>projects
<ul>
<li><a href=”projects/slideshow.html”>project slideshow</a></li>
<li>furniture…</li>
<li><a href=”projects/2009.html”>…2009</a></li>
<li><a href=”projects/2008.html”>…2008</a></li>
<li><a href=”projects/2007.html”>…2007</a></li>
<li><a href=”projects/interiors.html”>interior design</a></li>
</ul>
</li>
<li><a href=”contact.html”>contact</a></li>
</ul>
</div>

Using CSS, the unordered list which is nested inside a list item is positioned absolutely, and has no display until the list item is hovered over.

The following CSS code was taken from the above site with some minor modifications.

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
background: #fff;
padding: 1px 10px 5px 0px;
border: none;
}
li:hover ul {
display: block;
}

Advertisement