Sales Tracker - topMenu

by Joe Saad

HTML

<div id="heading" style="">
 <ul>
   <li><a href="#">Data Entry</a>
       <ul class="subnav">
          <li><a href="#">Sales Interaction</a></li>
          <li><a href="#">Daily Traffic</a></li>
       </ul>
   </li>
   <li><a href="#">Reporting</a>
      <ul class="subnav">    
         <li><a href="#">Export Data</a></li>
      </ul>
   </li>
   <li><a href="#">Administrative</a>
      <ul class="subnav">    
         <li><a href="#">Add User</a></li>
         <li><a href="#">User Management</a></li>      
      </ul>
   </li>
 </ul>
  </div>

CSS

ul li {display:inline;font-weight:bold; border:1px solid #009ddb; width:120px; float:left;margin-right:20px;margin-left:0px;}
    li a {display:block; text-align:center; text-decoration:none;color:#000; font-weight:bold;}
    a:hover {background-color:#009ddb; color:#FFF; border:0px solid;}
    .subnav {display:none;}
    ul li ul {margin-left:0px; width:100%;}
    ul li ul li { font-weight:normal; display:block; width:100%; font-size:smaller; border:0px solid; border-top:1px solid #009ddb;  }

JavaScript

$(document).ready(function() {
    var currentP = $('#body');
    $("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();
    });
    
    alert($('li a').text().replace(" ","").toLowerCase());
    
    $('li a').each(function(){
        if (($(this).text().replace(" ","").toLowerCase())==currentP){
            $(this).parent().css("background-color","#009ddb");
            $(this).css("color","#fff");
        }
    });
    
});