Android and Web Development
Pure CSS drop down menus
Drop down menus are great if you need a more tree like structure in your menus. This version is for a 2 level navigation style menu bar with drop down lists. They can be any size, just adjust the CSS accordingly.
Example Pure CSS Drop Down Menus
Download Files (4Kb)
There are some caveats, this code will not work in IE6. Internet Explorer 6 does not support :hover on elements other an anchor (A) tags. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.
This uses the now standard UL and LI tags for building menus, with anchor tags for links.
I’ll break down the CSS bit by bit.
.bigmenu {
margin: 0px;
padding: 0px;
list-style: none;
}
.bigmenu li.firstlevel {
margin: 0px;
padding: 0px;
float: left;
position: relative;
width: auto;
margin-right: 1px;
}
.bigmenu li.firstlevel a {
display: block;
height: 20px;
padding: 10px;
background-color: #555;
color: white;
text-decoration: none;
}
.bigmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
The above code defines all the first level elements, and resets the styles on the UL and LI tags.
.bigmenu li.firstlevel ul li a {
display: block;
height: auto;
padding: 5px;
background-color: #555;
}
.bigmenu li.firstlevel ul li a:hover {
display: block;
height: auto;
padding: 5px;
background-color: #777;
}
.bigmenu li.firstlevel ul {
position: absolute;
display: none;
top: 40px;
left: 0px;
min-width: 200px;
background-color: #555;
}
.bigmenu li.firstlevel:hover ul {
position: absolute;
display: block;
}
The above defines the 2nd level CSS, the most important part is .bigmenu li.firstlevel ul li a:hover the display:block shows the 2nd level! This will make sure the 2nd level menu is shown when the first level is rolled over by the mouse. It’s simple, and effective. The rest is just standard styling for CSS elements, and can be changed.