Pure Css Dropdown Menu Without Using Javascript

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
pure-css-dropdown-menu

Step first : we create a basic HTML structure.

[code lang="htmlstrict"]

[/code]

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.

2 thoughts on “Pure Css Dropdown Menu Without Using Javascript

  1. Laura

    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

  2. Joe Amon

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *