How to create a dropdown menu using CSS3 and HTML5

In this tutorial i am gonna teach you how to create a dropdown navigation menu using css3 and HTML5. Yes, with the help of the advanced selectors of HTML5 we can create a simple navigation menu and then we can throw in some of the amazing effects using CSS3. By using your own creativity in CSS3 you can design your navigation menu however you want. And these things are possible without any javascript and background images.Download source code.

In my this example i am going to create a navigation menu as it can be seen in the Image. with two level of submenu. So we first write the simple HTML5 code so that we can create the basic structure of the navigation menu.

<nav>

   <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">JavaScript</a></li>

    <li><a href="#">Tutorials</a>

     <ul>

      <li><a href="#">Web Designing</a>

       

      </li> 

      <li><a href="#">Web Development</a>

      <ul>

        <li><a href="#">PHP</a></li>

        <li><a href="#">.NET</a></li>

       </ul>

      </li>

     </ul>

    </li> 

    <li><a href="#">PHP</a></li>

    <li><a href="#">CSS</a></li>

   </ul>

  </nav>

After this code your webpage will be looking like.

Now we have to throw in some CSS so let's go ahead and see. so Now we have to hide all the child and let them look like the Navigation menu so

                  nav ul ul {

     display: none;

    }

  nav ul li:hover > ul {

     display: block;

    }

So this will hide its child menus and there will only be list which will be vertically. And on hover the parent menu it will show the Child submenu.We can then start to style up the main navigation menu with the help of CSS3 properties such as gradients, box shadows and border radius. Adding position:relative; will allow us to absolutely position the sub menus according to this main nav bar, then display:inline-table will condense the width of the menu to fit. The clearfix style rule will clear the floats used on the subsequent list items without the use of overflow:hidden, which would hide the sub menus and prevent them from appearing.

                    nav ul li {

     float: left;

     color:#fff;

    }

  nav ul li:hover {

     background: #eee;

    }

  nav ul li:hover a {

     color: #444;

    }

 

  nav ul li a {

     display: block;

     padding: 10px 40px;

     color: #eee;

     text-decoration: none;

    }

Now we are going to add css to each List item(<li>) of the sub-menus like their positioning,their padding and their ankor color,background color.

nav ul ul {

     background: #eee;

     border-radius: 0px;

     padding: 0;

     position: absolute;

     top: 100%;

    }

  nav ul ul li {

     float: none;

     border-top: 1px solid #444;

     border-bottom: 1px solid #444;

     position: relative;

    }

  nav ul ul li a {

     padding: 8px 40px;

     color: #fff;

    } 

  nav ul ul li a:hover {

     background: #888;

     color:#fff;

    }

Now we have styled the Menus and the Sub-menus, Now we have to design the Sub-sub-menus. Actually they will be inheriting each and every property from their parents we just have to position them  Absolutely to the right(left 100%).

               nav ul ul ul {

     position: absolute; left: 100%; top:0;

    }

Now we are done.

DownLoad This Navigation Menu.

 You just created a Navigation menu by your self. With only CSS3 and HTML5.Now you can put your own creativity like color and anything else you want.Hope you like this post.