Drop Down Menu
Lets have a look at how to make a
CSS drop down menu, this tutorial does not work in ie as ie does not support
:hover on anything except the anchor tag.
So lets get started type the following HTML
<ul
id="cssdropdown">
<li class="headlink">
Head Link
<ul>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
</ul>
</li>
<li class="headlink">
Head Link
<ul>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
</ul>
</li>
<li class="headlink">
Head Link
<ul>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
<li class="subHeadLink">Sub Link</li>
</ul>
</li>
</ul>
and add the following CSS
li,ul{
margin: 0px;
padding: 0px;
list-style-type: none;
color: #bdbdbd;
}
#cssdropdown{
list-style-type: none;
position: absolute;
z-index: 1;
}
.headlink{
float: left;
width: 150px;
background-color: #3a3a3a;
}
.subHeadLink
{
margin-top: 5px;
margin-bottom: 5px;
}
li.subHeadLink:hover
{
background-color: #bdbdbd;
color: #3a3a3a;
}
li.headlink ul { display: none; }
li.headlink:hover ul { display: block; }
This works by display the drop down content
based on which element is hovered over. When it is hovered the sub links are no
longer hidden 