Random musingsPakistan, Startups, Entrepreneurship, Food and more…

Today while working on one of my projects, I had a problem that I wanted to solve without (or little to nothing) Javascript. It was a nice Monday afternoon sorta problem to solve.

So here is a quick tutorial on how to create a dropdown menu using nothing but CSS. I am not claiming that I am the only person to have figured this out. I am also not claiming that this is the best solution out there. This is just here for you to learn, and for you to tell me what/how can I improve on it. Its all about learning.

Here we go:

Markup:

<div id=”menubutton”>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>Share / Bookmark</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
<ul class=”button”>
<li class=”">
<h2><a href=”#”>I am another button</a></h2>
<ul>
<li class=”first”><a href=”#”>Email Friends</a></li>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a></li>
<li><a href=”#”>Delicious</a></li>
<li><a href=”#”>Digg</a></li>
<li class=”last”><a href=”#”>Stumble Upon</a></li>
</ul>
</li>
</ul>
</div>

The structure is a bit crude (i think) but essentially provides a “menubutton” div container that will contain all of our buttons. Each button is a UL list with an h2 element with an anchor element inside it. This provides us with a simple text heading for the button. The LI also contains another UL list that will be used as a drop down menu. For the sake of simplicity and time, I have given the first and last elements in this list class of first and last respectively. This helps in styling the button. You shall see.

The CSS:

The CSS for this whole this is like this:

#menubutton {
z-index: 30;
}
#menubutton ul.button, ul {
list-style: none;
margin: 0;
padding: 0;
margin-right: 5px;
float: left;
}
#menubutton a, #menubutton h2 {
margin: -2px 0 0;
padding: 3px;
}

#menubutton a {
font-size: 12px;
text-decoration: none;
color: #3c89c8;
text-align: left;
}
#menubutton a:hover {
color: #1b325f;
}
#menubutton li {
position: relative;
}
#menubutton ul.button li ul {
position: absolute;
}
#menubutton ul.button li ul li {
padding: 5px 10px 5px 5px;
background-color: #fff;
border-left: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.first {
border-top: 1px solid #e1e1e1;
}

#menubutton ul.button li ul li.last {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 5px;
}

div#menubutton ul.button li ul {
display: none;
margin-top: 0px;
}

div#menubutton ul.button li:hover h2 {
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}

div#menubutton ul.button li ul li:hover {
background: #eeeeee;
}

div#menubutton ul.button li:hover ul {
display: block;
}

div#menubutton ul.button li ul li {
margin: 0;
font-family: Arial, Helvetica, sans-serif;;
text-align: left;
width: 140px;
}

div#menubutton ul.button li span a {
display: block;
}

li.menubutton ul {
width: 140px;
}

li.menubutton h2 {
padding: 5px;
}

Phew, that’s a lot of CSS.. I am not going to go through the details of the CSS but going to touch on one little trick that is being used here that makes it interesting. The UL that represents the dropdown menu is initially hidden by “display: none” property. We setup over hover monitoring via css on the LI that contains the H2 title and set this property to “block”. Voila! This makes the effect simple and very powerfull.

Give it a try. See it in action.

As always, your comments/suggestions are always welcome. Maybe there is a better way to structure the CSS so that its easily themeable. But I didn’t spend that much time on this so wanted to keep it simple for my own proof of concept.