How to Create a CSS Dropdown Menu

To create a menu with css is not a difficult task. You must understand the css and selectors of css. And you are able to create your own drop down menu with css. There is no need of images, jquery or javascript. If you are not able to create a menu with css no need to worry you can find it on our site.
In this post you will learn how to create a drop down menu with css3 only. We are not using any image or any javascript in this. And if you don't want to use jquery menu in your site and you want to use css3 menu. Then here is the best option for you. You can customize it easily.


pure-css-menu

Demo     Download

Now we are creating a dropdown menu that has two levels of drop downs. The child drop down will be show when the user will hover on parent link.
Now follow the steps for create a menu.

Html Structure

I am not using div instead I am using nav because I am using html 5 and The
Read more

Demo of Css 3 Menu

Back to Tutorial



Source Code

Html


<nav><br /> <ul><li><a href="#">Home</a></li> <li><a href="#">Services</a><br /> <br /> <ul><li><a href="#">Web Designing</a></li> <li><a href="#">User Development</a></li> </ul><br /> </li> <li><a href="#">Articles</a><br /> <br /> <ul><li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Web Designing</a><br /> <br /> <ul><li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul></li> </ul></li> <li><a href="#">Inspiration</a></li> </ul></nav> <br /> <br /> <br />

css


nav ul ul {
 display: none;
}

nav ul {
 background: #b3b7bf;
 background: -moz-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3b7bf),
  color-stop(100%, #7c7e84) );
 background: -webkit-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -o-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: -ms-linear-gradient(top, #b3b7bf 0%, #7c7e84 100%);
 background: linear-gradient(to bottom, #b3b7bf 0%, #7c7e84 100%);
 box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
 padding: 0 20px;
 border-radius: 0px;
 list-style: none;
 position: relative;
 display: inline-block;
}

nav ul li {
 float: left;
}

nav ul li a {
 display: block;
 padding: 20px 40px ;
 color: rgba(0, 0, 0, 0.68) ;
 font-family: arial ;
 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6) ;
 text-decoration: none ;
 font-size: 15px ;
 font-weight: bold ;
}

nav ul li:hover>ul {
 display: block;
}
nav ul li:hover {
 background: #7c7e84;
 background: -moz-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7c7e84),
  color-stop(100%, #b3b7bf) );
 background: -webkit-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -o-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: -ms-linear-gradient(top, #7c7e84 0%, #b3b7bf 100%);
 background: linear-gradient(to bottom, #7c7e84 0%, #b3b7bf 100%);
 filter: progid : DXImageTransform.Microsoft.gradient (   startColorstr =
  '#7c7e84', endColorstr = '#b3b7bf', GradientType = 0 );
}

nav ul li:hover a {
 color: rgba(0, 0, 0, 0.68);
}

nav ul ul {
 background: #82848A ;
 border-radius: 0px ;
 padding: 0 ;
 position: absolute ; 
 top: 100%;
}

nav ul ul li {
 float: none;
 border-top: 1px solid #fff;
 position: relative;
}

nav ul ul li a {
 padding: 15px 40px;
}


nav ul ul ul {
 position: absolute;
 left: 100%;
 top: 0;
}
Read more

25 Jquery Horizontal And Vertical Menu

Read more

33 Single Page Website Design

Read more
IF you have any suggestions or any article then write in comments we will contact you.