Pure CSS Drop Down Menu
Date Published: May 21, 2009
Here is a tutorial for a pure CSS horizontal drop down menu. No Javascript is needed for this solution. It is tested in Firefox, Opera, Chrome, Safari, Internet Explorer 7 and 8. You don't have to be worried about the supposed "IE7 z-index bug" either. No hacks are needed to achieve this, just pay close attention to where the z-index is placed below. The xhtml and the CSS both validate for this solution. On IE 6 it will show only the top menus, and not the drop downs. So if your solution requires IE 6 compliance, this solution is not for you. However, it is a good learning exercise. Personally, I cannot understand why people still hold on to a browser that is over ten years old. It is simply beyond me. But I digress...
Step 1 – setting up the html
Set up the html as shown below. You will need to have a separate div for the menu and the rest of the content to allow the drop downs to set on top of the content via the z-index property. The id on the Body tag will be used to show the active or current page on the button.
<body id="BodyOptionA">
<div id="header">
<ul id="TestNav" >
<li id="optionA"><a href="#">Option A</a>
<ul>
<li><a href="#">sub A</a></li>
<li><a href="#">sub A</a></li>
<li><a href="#">sub A</a></li>
<li><a href="#">sub A</a></li>
<li><a href="#">sub A</a></li>
</ul>
</li>
<li id="optionB"><a href="#">Option B</a>
<ul>
<li><a href="#">sub B</a></li>
<li><a href="#">sub B</a></li>
<li><a href="#">sub B</a></li>
</ul>
</li>
<li id="optionC"><a href="#">Option C</a>
<ul>
<li><a href="#">sub C</a></li>
<li><a href="#">sub C</a></li>
<li><a href="#">sub C</a></li>
</ul>
</li>
<li id="optionD"><a href="#">Option D</a>
<ul>
<li><a href="#">sub D</a></li>
<li><a href="#">sub D</a></li>
<li><a href="#">sub D</a></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<p>Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus. Mauris quis metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</body>
Step 2 – round one of the CSS code
The first step is to set the background color for the button depending on which page you are on (in this case, Option A). So we use the body id and the main list item id to achieve this. Next set the styles of the divs for your menu and your content, of course use whatever sizes are right for your page. Important: set the z-index of the header to a value of 2, the z-index of the content to a value of 1. Then set remaining values for the main unordered list and the main list items.
#BodyOptionA optionA{
background:#333333;
}
#TestHeader {
z-index:2;
position:relative;
height:30px;
width:100%;
margin:10px;
}
#TestContent {
z-index:1;
width:100%;
position:relative;
height:100px;
margin:5px;
padding:5px;
}
#TestNav{
position:relative;
margin:0;
padding:0;
}
#TestNav li{
list-style:none;
background:#003366;
float:left;
font-size:11pt;
font-weight:bold;
margin:0;
}
#TestNav li a{
text-decoration:none;
color:white;
width:100px;
padding:5px;
text-align:center;
display: block;
}
#TestNav li:hover a {
color:#333333;
background-color:#d06f1a;
}
Step 3 – using CSS to show and hide the drop downs
Here we are going to combine all of the elements to show and hide the drop downs into two steps. This is also where naming the first layer of list items comes into play. The first block will hide the sub-navigation by default. The second block of CSS will show it upon the mouse hovering over the named list item. Note the position of the hover pseudo class.
#optionA ul, #optionB ul, #optionC ul, #optionD ul {
display:none;
}
#optionA:hover ul, #optionB:hover ul, #optionC:hover ul, #optionD:hover ul{
display:block;
}
Step 4 - styling the drop downs
Style the drop downs as shown below. Important: make sure you use absolute positioning on the ul tag of the drop down.
#TestNav li ul {
margin:0px;
padding:0px;
position:absolute;
}
#TestNav li ul li {
float:none;}
#TestNav li ul li a{
display:block;
padding:5px 8px;
font-weight:normal;
margin:0px;
line-height:normal;
font-size:9pt;
width:100px;
position:relative;
}
#TestNav li ul li a:hover{
color:white;
background-color:#003366;
}
The finished result
And that is all there is to it. You can see the result below.
Content goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer purus. Mauris quis metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.