JQuery Menu

I made a drop down menu using jquery. I want the menu to hide when you mouse up and out of the menu bar. Currently it hides only when you mouse out of the drop down but not out of the menu bar. I've attached my code below. Any help would be greatly appreciated!


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Main Menu -->
<script type="text/javascript">
 $(document).ready(function () {
$('.mainNavContent').hide();
 $(".expandThis").mouseover(function() {
$('.mainNavContent').hide();
 $(this).children('.mainNavContent').show(); 
 });

 $(".mainNavContent").mouseout(function() {
$('.mainNavContent').hide();
 });

 $(".expandThisClose").click(function() {
$('.mainNavContent').hide();
 });
 });
</script>


<style type="text/css">

#logo{height:90px;}

.inlineList li{
display:inline;
list-style:none;
margin:0 0 0 20px;
padding:0;
}
.inlineFirst{margin-left:0px !important; padding-left:0px !important; border-left:none !important;}

.mainNavContent{display:none;}

.mainNav{
position:relative;
height:25px;
padding:5px 0 0 0;
background-image: url(../images/gradient-sprite.png);
background-position: 0px 1px;
}

.mainNav ul{padding:0 10px;}
.mainNav a:link, .mainNav a:visited,
.mainNav a:hover, .mainNav a:active {
font-weight:bold;
}

.mainNavDropDown{
position:absolute;
top:33px;
left:0px;
display:block;
height:263px;
z-index:1000;
background-image: url(../images/gradient-sprite.png);
background-position: 0px -181px;
background-color:#f8f8f8;
}

</style>


</head>
<body>
 <div id="logo">
 <img name="" src="" width="125" height="80" alt="Logo" style="background-color: #999999" />
 </div>
 <div class="grid_16 mainNav"> 
 <div class="grid_12 alpha" id="mainNav-bar">
 <ul class="inlineList">
 <li class="expandThis inlineFirst"><a href="#">Sample Link 1</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">
  <p>Sample Content 1</p>
  </div>
 </li> 
 <li class="expandThis"><a href="#">Sample Link 2</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">
  <p>Sample Content 2</p>
  </div>
 </li>
 <li class="expandThis"><a href="#">Sample Link 3</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">
  <p>Sample Content 3</p>
  </div>
 </li>
 
 <li class="expandThis"><a href="#">Sample Link 4</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">
  <p>Sample Content 4</p>
  </div>
 </li>
 <li class="expandThis"><a href="#">Sample Link 5</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">  
  <p>Sample Content 5</p>
  </div>
 </li>
  
 <li class="expandThis"><a href="#">Sample Link 6</a>
  <div class="grid_12 alpha omega mainNavContent mainNavDropDown">   
  <p>Sample Content 6</p>
  </div>
 </li>
   
 </li>
 </ul>

 </div> 
 
 <div class="clear"></div>
 </div>
 <div class="clear"></div>

JQuery Menu

rwilson

enigma1

rwilson

enigma1

rwilson

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week