jQuery CSS3 And HTML5 Simple Drop Down Nav Menu | jQuery Drop Down Menu | jQuery

Hello Developer, this time we learn how to create simple drop-down menu using jQuery, CSS3 and HTML5. Drop-down menu is require in most of website for navigation. So.....

Let's See Drop-Down Menu !!!

First You need to create on HTML file for example : index.html

  

<div class="wrapper">
  <div id="main">
   <nav>
    <ul>
     <li>
      <a href="#">Link 1</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
     <li>
      <a href="#">Link 2</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
     <li>
      <a href="#">Link 3</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
     <li>
      <a href="#">Link 4</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
     <li>
      <a href="#">Link 5</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
     <li>
      <a href="#">Link 6</a>
      <ul class="fallback">
       <li><a href="#">Sub-Link 1</a></li>
       <li><a href="#">Sub-Link 2</a></li>
       <li><a href="#">Sub-Link 3</a></li>
       <li><a href="#">Sub-Link 4</a></li>
      </ul>
     </li>
    </ul>
   </nav>
  </div>
 </div>

Now You need to create jQuery file : script.js

  
$(function () {
  $('nav li ul').hide().removeClass('fallback');
  $('nav li').hover(function () {
   $('ul', this).stop().slideToggle(200);
  });
 });

At last you need to create style sheet CSS file : style.css

  

                * {
margin:0;padding:0;
}
  a img {
border:none;
}
  a {
text-decoration:none;
}
  body {
font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;font-smoothing:antialiased;
text-rendering:optimizeLegibility;color:#444;background:#F0F0ED;
}
  .wrapper {
max-width:1000px;width:95%;margin:0 auto;position:relative;
}
  #header {
overflow:auto;background:#33363C;border-top:5px solid #2F3135;
border-bottom:2px solid #04A4CC;
}
  #logo {
float:left;margin:10px 50px 5px;
}
  #logo img {
width:80px;height:36px;
}
  #view-tut {
float:right;font-size:13px;font-weight:900;margin:10px 50px 5px;
}
  #view-tut ul {
margin:0;
}
  #view-tut ul li {
display:inline-block;*display:inline;zoom:1;margin:0 5px 0 0;
}
  #view-tut ul li a {
display:block;padding:5px 10px;background:#04A4CC;color:#FFF;border-radius:20px;
}
  #view-tut ul li a:hover {
background:#0097CD;
}
  #main p {
padding:0;margin:10px 0 0;
}
  #footer {
clear:both;
}
  
  
  nav {
position:absolute;top:100px;
}
nav {background:#FFF;float:left;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;}
nav ul li:hover {background:#E6E6E6;}
nav ul li a {display:block;padding:15px 25px;color:#444;}
nav ul li ul {position:absolute;width:110px;background:#FFF;}
nav ul li ul li {margin:0;padding:0;width:110px;}
nav ul li ul li a {display:block;padding:15px 10px;color:#444;}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}

ENJOY jQUERY DROP DOWN MENU !!! :)