How to Create Drop Down Menu using CSS3 and JQuery

Today i would like to show, How to Create Drop Down Menu using CSS3 and jQuery. Designing a Simple Drop Down Menu with HTML by Implementing CSS and jQuery is very easy to create. A simple horizontal menu that shows it’s sub menu on mouse hover. when you hover a mouse on main link it will show it’s sub menu. just take a look at this tutorial.

 

Download Script

The HTML

Simple HTML Code , Menu Structure With UL , LI tags

<div class="wrap">
<ul id="nav">  
 <li><a href="#">Home</a></li>
 <li><a href="#">About cleartuts</a>
 <ul>    
  <li><a href="#">Contact Me</a></li>
  <li><a href="#">Sitemap</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Get in Touch</a></li>
        <li><a href="#">Privacy</a></li>
 </ul>
 </li>
 <li><a href="#">Tutorials</a>
  <ul>
  <li><a href="#">PHP & MySql</a></li>
  <li><a href="#">PHP OOP</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">CSS3</a></li>
  <li><a href="#">HTML5</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Sub-menu 1</a></li>
  <li><a href="#">Sub-menu 2</a></li>
  <li><a href="#">Sub-menu 3</a></li>
  <li><a href="#">Sub-menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Website Design</a></li>
  <li><a href="#">Mobile</a></li>
  <li><a href="#">User Interface</a></li>
  <li><a href="#">Android</a></li>
  </ul>
 </li>
    <li><a href="#">Categories</a>
  <ul>
  <li><a href="#">PHP OOP</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">MySql</a></li>
  <li><a href="#">CSS</a></li>
        <li><a href="#">jQuery</a></li>
  </ul>
 </li>
</ul>
</div>

The Javascript/jQuery

Javascript contains .hover(), .slideDown and .slideUp() functions.
When mouse hovered on main menu the following .hover() function called.

<script type="text/javascript">
$(document).ready(function() 
{
 $('#nav li').hover(function() 
 {
  $('ul', this).slideDown(50);
  $(this).children('a:first').addClass("hov");
 }, function() 
 {
  $('ul', this).slideUp(50);
  $(this).children('a:first').removeClass("hov"); 
 });
});
</script>

The CSS

* {
 margin: 0;
 padding: 0;
}
body {
 font-family: "Comic Sans MS", cursive;
 font-size: 15px;
 color: #232323;
}

#head {
 background: #f9f9f9;
 height: 100px;
 padding-top: 15px;
 border-bottom: 1px solid #d5dce8;
}
.wrap {
 width: 800px;
 margin: 0 auto;
}
/* nav menu */
#nav {
 margin: 0;
 padding: 0;
 list-style: none;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 border-bottom: 1px solid #d5dce8;
 border-bottom-left-radius: 4px;
 -moz-border-radius-bottomleft: 4px;
 -webkit-border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 -moz-border-radius-bottomright: 4px;
 -webkit-border-bottom-right-radius: 4px;
 height: 50px;
 padding-left: 15px;
 padding-right: 15px;
 background: #f9f9f9;
}
#nav li {
 float: left;
 display: block;
 background: none;
 position: relative;
 z-index: 999;
 margin: 0 1px;
}
#nav li a {
 display: block;
 padding: 0;
 font-weight: 700;
 line-height: 50px;
 text-decoration: none;
 color: #818ba3;
 zoom: 1;
 border-left: 1px solid transparent;
 border-right: 1px solid transparent;
 padding: 0px 12px;
}
#nav li a:hover, #nav li a.hov {
 background-color: #fff;
 border-left: 1px solid #d5dce8;
 border-right: 1px solid #d5dce8;
 color: #576482;
}
/* subnav */
#nav ul {
 position: absolute;
 left: 1px;
 display: none;
 margin: 0;
 padding: 0;
 list-style: none;
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 padding-bottom: 3px;
}
#nav ul li {
 width: 180px;
 float: left;
 border-top: 1px solid #fff;
 text-align: left;
}
#nav ul li:hover {
 border-left: 0px solid transparent;
 border-right: 0px solid transparent;
}
#nav ul a {
 display: block;
 height: 20px;
 line-height: 20px;
 padding: 8px 5px;
 color: #666;
 border-bottom: 1px solid transparent;
 text-transform:  uppercase;
 color: #797979;
 font-weight: normal;
}
#nav ul a:hover {
 text-decoration: none;
 border-right-color: transparent;
 border-left-color: transparent;
 background: transparent;
 color: #4e4e4e;
}

That's it, we have created here a simple Drop Down Menu with HTML, CSS and jQuery.
you can download this tutorial by using following Download link and implement it in your projects.

Download Script