Horizontal Drop-Down Menu

         This large horizontal drop-down menu simply shows the sub-menu when an item gets clicked. It’s inspired by the Microsoft.com drop-down menu. Some example media queries show how to adjust the menu for smaller screens.

The HTML

<nav id="cbp-hrmenu" class="cbp-hrmenu">
 <ul>
  <li>
   <a href="#">Products</a>
   <div class="cbp-hrsub">
    <div class="cbp-hrsub-inner"> 
     <div>
      <h4>Learning & Games</h4>
      <ul>
       <li><a href="#">Catch the Bullet</a></li>
       <li><a href="#">Snoopydoo</a></li>
       <!-- ... -->
      </ul>
     </div>
     <div>
      <h4>Utilities</h4>
      <ul>
       <li><a href="#">Gadget Finder</a></li>
       <li><a href="#">Green Tree Express</a></li>
       <li><a href="#">Green Tree Pro</a></li>
       <li><a href="#">Wobbler 3.0</a></li>
       <li><a href="#">Coolkid</a></li>
      </ul>
     </div>
     <div>
      <!-- ... -->
     </div>
    </div><!-- /cbp-hrsub-inner -->
   </div><!-- /cbp-hrsub -->
  </li>
  <li><!-- ... --></li>
  <li><!-- ... --></li>
  <!-- ... -->
 </ul>
</nav>

The CSS

.cbp-hrmenu {
 width: 100%;
 margin-top: 2em;
 border-bottom: 4px solid #47a3da;
}

/* general ul style */
.cbp-hrmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
 width: 90%;
 max-width: 70em;
 margin: 0 auto;
 padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
 display: inline-block;
}

.cbp-hrmenu > ul > li > a {
 font-weight: 700;
 padding: 1em 2em;
 color: #999;
 display: inline-block;
}

.cbp-hrmenu > ul > li > a:hover {
 color: #47a3da;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
 color: #fff;
 background: #47a3da;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
 display: none;
 position: absolute;
 background: #47a3da;
 width: 100%;
 left: 0;
}

.cbp-hropen .cbp-hrsub {
 display: block;
 padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
 width: 33%;
 float: left;
 padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
 content: " ";
 display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
 clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
 line-height: 2em;
}

.cbp-hrsub h4 {
 color: #afdefa;
 padding: 2em 0 0.6em;
 margin: 0;
 font-size: 160%;
 font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

 .cbp-hrmenu {
  font-size: 80%;
 }

}

@media screen and (max-width: 43em) { 

 .cbp-hrmenu {
  font-size: 120%;
  border: none;
 }

 .cbp-hrmenu > ul,
 .cbp-hrmenu .cbp-hrsub-inner {
  width: 100%;
  padding: 0;
 }

 .cbp-hrmenu .cbp-hrsub-inner {
  padding: 0 2em;
  font-size: 75%;
 }

 .cbp-hrmenu > ul > li {
  display: block;
  border-bottom: 4px solid #47a3da;
 }

 .cbp-hrmenu > ul > li > a { 
  display: block;
  padding: 1em 3em;
 }

 .cbp-hrmenu .cbp-hrsub { 
  position: relative;
 }

 .cbp-hrsub h4 {
  padding-top: 0.6em;
 }

}

@media screen and (max-width: 36em) { 
 .cbp-hrmenu .cbp-hrsub-inner > div {
  width: 100%;
  float: none;
  padding: 0 2em;
 }
} 

The JavaScript

var cbpHorizontalMenu = (function() {

 var $listItems = $( '#cbp-hrmenu > ul > li' ),
  $menuItems = $listItems.children( 'a' ),
  $body = $( 'body' ),
  current = -1;

 function init() {
  $menuItems.on( 'click', open );
  $listItems.on( 'click', function( event ) { event.stopPropagation(); } );
 }

 function open( event ) {

  if( current !== -1 ) {
   $listItems.eq( current ).removeClass( 'cbp-hropen' );
  }

  var $item = $( event.currentTarget ).parent( 'li' ),
   idx = $item.index();

  if( current === idx ) {
   $item.removeClass( 'cbp-hropen' );
   current = -1;
  }
  else {
   $item.addClass( 'cbp-hropen' );
   current = idx;
   $body.off( 'click' ).on( 'click', close );
  }

  return false;
 }
 function close( event ) {
  $listItems.eq( current ).removeClass( 'cbp-hropen' );
  current = -1;
 }
 return { init : init };
})();

1.Demo  2.Download Source