• Article Written 
  • on 04.07.2009
  •  at 06:26 AM
  •  by admin

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.

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,