This is a tutorial on how to create pure CSS Drop down menu without using javascript. I noticed however, that people often use JavaScript to achieve this effect. Actually, there is a simple way to do it only with CSS.
Here is the example
Step first : we create a basic HTML structure.
[code lang="htmlstrict"][/code]Developer's Paradise demos
Step second : now we create magic CSS code
[code lang="css"]
*{ margin:0; padding:0;}
body {
background:#222;
font:100% normal Arial, Helvetica, sans-serif;
}
h1 {color:#fff;}
#header {
height:120px; position:relative;
background:#333;
}
#menu {
margin:0px;
padding:0px;
position:absolute;
top: 70px;
display:block;
}
#menu > li {
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#menu > li:hover ul {
display:block;
}
#menu > li:hover {
background-color:#808080;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#menu li ul {
margin:0px;
padding:0px;
display:none;
}
#menu li ul li {
list-style-type:none;
margin:10px 0 0 0;
font-size:11px;
}
#menu li ul li a {
display:block;
padding:5px 10px;
color:#fff;
text-decoration:none;
font-weight:bold;
}
#menu li ul li:hover a {
background-color:#606060;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#menu li span {
cursor:pointer;
margin:0px 10px;
font-weight:bold;
color:#fff; font-size:11px;
}
[/code]
Please note that this code doesn’t work in IE6 (this poor browser just doesn’t know what ul > li means).
I would be greatful if you could take a second to help promote my blog and share this link with any of your favoured networking sites using the link below. Here is a link to our preferred site if you wish to register a Domain name.
Actually you can make it work in IE6 if you don’t mind adding a bit of js/jquery and another class.
$('#menu > li').hover(function() {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
Then just this to your stylesheet…
#menu li ul li.hover a
I have wasted hours trying to get a menu like this to work thats not overly complicated, beefy, involves js or crazy style sheets. Thank you so much, yours is easy, clean and the best I’ve seen. To bad for me I didn’t discover this post sooner.
Anyhow, one more hurdle before my menu is done. Can you help please? I want the sub menu that appears on main menu hover to have a fixed width – larger than the main menu’s – to accommodate larger link tags. I can adjust the width on ul#menu li ul, ul#menu li ul li or even ul#menu li ul li a and add background color – but the background is not complete because of the padding between the ul#menu li ul li’s.
Thank you again.