Horizontal navigation with Popup submenu

simple horizontal navigation with popup submenus

by Joe Saad

HTML

<ul>
   <li><a href="#">My Profile</a></li>
   <li><a href="#">Activity Entry</a>
       <ul class="subnav">
         <li><a href="#">Sales</a></li>
         <li><a href="#">Track</a></li>
         <li><a href="#">Place</a></li>
       </ul>
   </li>
   <li><a href="#">Reporting</a></li>
   <li><a href="#">Administrative</a>
      <ul class="subnav">
        <li><a href="#">Manage Account</a></li>
        <li><a href="#">Add Account</a></li>
      </ul>
   </li>
</ul>

CSS

ul li {display:inline;font-weight:bold; border:1px solid red; width:120px; float:left;}
    li a {display:block;}
    a:hover {background-color:#1199aa;}
    .subnav {display:none;}
    ul li ul {margin-left:10px; padding-left:0px;}
    ul li ul li { font-weight:normal; display:block; border:1px solid; width:110px; }

JavaScript

$(document).ready(function() {
    $("li a").hover(function() {
        $(this).parent().children('ul').show();
        $(this).parent().children('ul').hover(function() {
            $(this).parent().children('ul').show();
        }, function() {
            $(this).parent().children('ul').hide();
        });
    }, function() {
        $(this).parent().children('ul').hide();
    });
});