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.

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

tag defines a section of navigation links.
This is the html structure for menu first ul is the master ul. We add another ul under the Services and Articles li that is the child menu for these. For article drop down has further child. And also we have create 3 div with bottomArrow and RightArrow class. These divs will indicate that this li has further children. If you do not want to show them you can hide them.

<nav><br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Home</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Services</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">User Development</a></li> </ul><br /> </li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Articles</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Photoshop</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Illustrator</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Web Designing</a><br /> <br /> <ul><li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">HTML</a></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">CSS</a></li> </ul></li> </ul></li> <li><a href="//www.blogger.com/blogger.g?blogID=4276763109087946480#">Inspiration</a></li> </ul></nav> <br /> <br /> <br />

After creating the html your html will be look as this. These are simple unordered lists.

css for Menu

nav ul ul {
 display: none;
}

Now time to apply css to the menu . I am using tag name and advance css selectors instead of id or class because it will make my html and css clean and more readable. Now first I hide all the child ul I have written nav ul ul. It means all ul inside a ul. So all the child ul is hidden now.

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;
}

Now I am defining background for parent ul by writing nav ul. And I am using css3 gradient background. You can change the color combination as per your requirements. And I have also give position: relative; the child ul have absolute position and then they will positioned according to parent ul. Otherwise they will positioned as the widow.

In nav ul li I have define float: left; it means all the li of parent ul will comes in a single row.

In nav ul li a I have give style to text like font-family, font size etc. And I have give display: block; if I do not give it block then it will not get padding. And it will not display as box.

nav ul li:hover>ul {
 display: block;
}
nav ul li:hover  {

background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C */
}
nav ul li:hover a {
 color: rgba(0, 0, 0, 0.68);
}

In nav ul li:hover>ul I have give property display:block to ul on hover of li. And I have written nav ul li:hover>ul It means when anyone will hover on li then its immediate child ul be display. If I will not put > then all the ul be display.

In nav ul li:hover I have change the background color of each li on which user will hover.

In nav ul li:hover a I have changed the text color when user will hover on li.

nav ul ul {
 background: #5f6975;
 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;
 }

Now I have give complete style to main menu. Now the time is to apply css on sub menus.

In nav ul ulI have give background color to child ul and padding will set the position of text and also give position: absolute; now the sub ul will not affect the parent ul when it display and top: 100%; will make it display where the parent li end as vertically .

In nav ul ul li I have target the li of sub menu and give float: none because I don’t want to display them in a single line. And then give position: relative that will set the position of their child ul.

In nav ul ul li a I have give padding to center the text .

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

In nav ul ul ul I am targeting the third sub menu and position: absolute will set its position that will not affect its parent and left: 100%; will make it display where its parent li ends as horizontally. And top: 0; will make it display where its parent li starts as vertically.



View Demo