Pure CSS Menu Dropdowns

I want to start out by saying there are a million ways to do menu dropdowns.  You can use javascript, jquery, css or any number of other languages to get the same or close to the same end result.

In this situation it’s for a non profit and I’m not charging for these changes but I still want it to look good and function well.  Pure CSS works well in this situation.  It’s lightweight, easy to implement and in the future it will be dead simple for another dev to work on.

The basic html layout I was working with was like this.

<div id=”mainnav”>
<ul id=”menu”>
<li class=”menu-item”><a>item 1</a>
<ul class=”sub-menu”>
<li class=”menu-item”><a>item 1 sub 1</a></li>
<li class=”menu-item”><a>item 1 sub 2</a></li>
</ul>
</li>
<li class=”menu-item”><a>item 2</a>
<ul class=”sub-menu”>
<li class=”menu-item”><a>item 2 sub 1</a></li>
<li class=”menu-item”><a>item 2 sub 2</a></li>
</ul>
</li>
</ul>
</div>

Pretty standard and as you might have guessed a default WordPress menu layout 🙂

The first thing I wanted to do with the CSS was hide the sub-menu but make it so when I do need it it won’t effect the rest of the page layout.  Basically browsers will stick it directly below the menu item it’s part of because they’re in the same box.

#mainnav ul.sub-menu {position:absolute; display:none;}

Next we need to allow the main menu to flow horizontally instead of vertically by saying the elements should float to the left.   We’re also disabling the default list styling for the li element.

#mainnav li {float: left; list-style: none; }

Next we add a hover event which will display the individual item within the main element (this should work for sub elements of the sub element as well).  For this we just say display block which means show the element.

.menu-item:hover ul.sub-menu {display: block !important;}

This gets us most of the way, though at this point we’re still missing a little styling.  Things will come out a little ugly.  To fix this I added this final bit of code to make the elements stack properly.

.sub-menu li { float: none !important;}

At this point your menu should work.  Obviously there will be a lot of styling issues to work on but that’ll be specific to your site.

Example & Code