Simple Horizontal Style - Drop-Down Menu

In this post we're going to see, How to create a drop-down menu using structured HTML, simple CSS and minimal jQuery, it is possible to create visually appealing drop-down menus that are easy to edit and update, and that work across a cross browsers, (including IE). Lets start

HTML CODE : Creating the menu Structure:

Creating the menu structure is the first thing in process of creating menu. The best way to do this is to build an unordered list <ul>, with each sub-menu appearing as a list within its parent list item.like this,

<div id="menuContainer">
  <ul class="menu">

  <li><a href="#">Home</a></li> 
        
  <li><a href="#">Services</a> 
      <ul> 
      <li><a href="#">Web Development</a></li> 
      <li><a href="#">UI Development</a></li> 
      <li><a href="#">Domain Hosting</a></li> 
      <li><a href="#">Cloud Computing</a></li> 
      </ul> 
  </li>
        
  <li><a href="#">Products</a> 
      <ul> 
      <li><a href="#">Android Applications</a></li> 
      <li><a href="#">iOs Applications</a></li> 
      <li><a href="#">Windows Phone</a></li> 
      </ul> 
    </li>
   
     <li><a href="#">Contact</a> 
      <ul> 
      <li><a href="#">Address</a></li> 
      <li><a href="#">Map</a></li> 
      </ul> 
    </li> 

  </ul>
    
</div>

CSS CODE : Visually appealing:

If you have run the menu untill above state, you'll see a traditional list of items. So we need css help to make list visually appealing! Let's do styling.

Step 1: Remove the indents and bullets from the <ul> and define the width.

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px;
 }

Step 2: Position our list items. We must set the position as relative, because we will need to position the sub-menus absolutely within them.

ul li {
 position: relative;
}

Step 3: Make each sub-menu to appear to the right of its parent menu item when that item is hovered over.
 as well we don’t want show the sub-menus by default. so set display to "none".

li ul {
 position: absolute;
 left: 149px;
 top: 0;
 display: none;
 }

Make it in Action:
Now we need to make our sub-menus appear when we hover over the menu items.

li:hover ul { display: block; }

Lets see a MAGIC!!!...Cool know.!!

Note: IE only allows the :hover pseudo-class to be applied to a link(<a href...) — so the li:hover that makes the sub-menus appear means nothing to IE. to make IE to understand, we need tiny help from jQuery/JavaScript. like shown below,

$(function(){

   $( " ul.menu li a" )
  .mouseover(function() {
    $( this ).addClass( "current" );
   })
  .mouseout(function() {
    $( this ).removeClass( "current" );
  });
    
});

So, bit of change in hover rule now,

li:hover ul, li.current ul {  display: block;  }

That’s it! A standards-friendly method for creating visually appealing horizontal drop-down menus. All you have to do now is add some hover styles and make it your own. Enjoy!

Live Demo &Try Yourself