如何使用Jquery显示下拉菜单？

Question

I am using jQuery to display the drop down menu. It is working for single menu and displaying the proper drop down. If I used more than one menu it is displaying all drop down menus. I know, I passed the same class in jQuery but how can we use same class in multiple menus. Is it possible?

Please check my output in the snippet. If I hover on Menu-1 then it is also displaying the Menu-2 and Menu-3 dropdown. I have to display single drop down when hover. Can you help me with jQuery?

Here is my snippet:

 $(function() { $(".menu").hover( function() { $(".sub").slideToggle(400); }, function() { $(".sub").hide(); } ); }); 

 a{ text-decoration: none; } .menu{ font-family: Arial; color: #515151; position: relative; background-color: #763E9B; width: 100%; color: #fff; } .menu ul.main-menu{ list-style: none; float: right; } .menu li.main-list { margin: 20px; float: left; } .menu li a{ color: #515151; display: block; padding: 10px 15px; cursor: pointer; font-size: 14px; } .menu ul.sub-options li a:hover{ background: #f44141; color: #fff; /*margin: 20px;*/ } .sub{ background: #fff; position: absolute; z-index: 2; width: 200px; padding: 10px 0 3px; border-radius: 3px; box-shadow: 0 2px 4px #ddd; border: 1px solid #ddd; display: none; } a.hover-link{ font-size: 14px; color: #fff; z-index: 110; display: block; padding: 10px 0 1px 10px; cursor:pointer; border-radius: 5px 5px 0 0; font-weight: bold; } .sub-options{ list-style:none; margin:0px; padding:0px; font-size: 11px; } .square:before { content: ""; position: absolute; left: 50%; top: -10px; width: 0; height: 0; border-style: solid; border-width: 0; border-color: transparent transparent #fae0bb transparent; z-index: 9999; transform: translateX(-50%) } .square:after { content:""; position: absolute; right: 4px; top: -22px; width: 0; height: 0; border-style: solid; border-width: 0 17px 17px 17px; border-color: transparent transparent #ffffff transparent; z-index:9998; } .square { background: #fae0bb; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); position: absolute; margin: 0; /*top: 2.8em;*/ width: 200px; z-index: 99999; margin-top: 20px; } .menu:hover .square:before{ border-width: 0 10px 10px 10px; } 

 <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <div class='menu'> <ul class="main-menu"> <li class="main-list"><a class='hover-link'>Menu 1</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> <li class="main-list"><a class='hover-link'>Menu 2</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> <li class="main-list"><a class='hover-link'>Menu 3</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> </ul> </div> 

Answer 1

You should use $(this) to target each element individually. Like:

$(function() {
  $(".main-list").hover(
    function() { $(this).find('.sub').slideToggle(400); },
    function() { $(this).find('.sub').hide(); }
  );
});

Add a <div class="clear"> before ending the .menu & apply clear: both CSS rule to it:

HTML:

<div class="menu">
  <ul>...<ul>
  <ul>...<ul>
  <div class="clear"></div>
</div>

CSS:

.clear {
  clear: both;
}

Have a look at the snippet below:

 $(function() { $(".main-list").hover( function() { $(this).find('.sub').slideToggle(400); }, function() { $(this).find('.sub').hide(); } ); }); 

 .clear { clear: both; } a{ text-decoration: none; } .menu{ font-family: Arial; color: #515151; position: relative; background-color: #763E9B; width: 100%; color: #fff; } .menu ul.main-menu{ list-style: none; float: right; } .menu li.main-list { margin: 20px; float: left; position: relative; } .menu li a{ color: #fff; display: block; padding: 10px 15px; cursor: pointer; font-size: 14px; } .menu ul.sub-options li a { color: #151515; } .menu ul.sub-options li a:hover{ background: #f44141; color: #fff; /*margin: 20px;*/ } .sub{ background: #fff; position: absolute; z-index: 2; width: 200px; padding: 10px 0 3px; border-radius: 3px; box-shadow: 0 2px 4px #ddd; border: 1px solid #ddd; display: none; } a.hover-link{ font-size: 14px; color: #fff; z-index: 110; display: block; padding: 10px 0 1px 10px; cursor:pointer; border-radius: 5px 5px 0 0; font-weight: bold; } .sub-options{ list-style:none; margin:0px; padding:0px; font-size: 11px; } .square:before { content: ""; position: absolute; left: 50%; top: -10px; width: 0; height: 0; border-style: solid; border-width: 0; border-color: transparent transparent #fae0bb transparent; z-index: 9999; transform: translateX(-50%) } .square:after { content:""; position: absolute; right: 4px; top: -22px; width: 0; height: 0; border-style: solid; border-width: 0 17px 17px 17px; border-color: transparent transparent #ffffff transparent; z-index:9998; } .square { background: #fae0bb; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); position: absolute; margin: 0; left: 50%; transform: translateX(-50%); /*top: 2.8em;*/ width: 200px; z-index: 99999; margin-top: 20px; } .main-list:hover .square:before{ border-width: 0 10px 10px 10px; } 

 <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <div class='menu'> <ul class="main-menu"> <li class="main-list"><a class='hover-link'>Menu 1</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> <li class="main-list"><a class='hover-link'>Menu 2</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> <li class="main-list"><a class='hover-link'>Menu 3</a> <div class="square"> <div class='sub'> <ul class='sub-options'> <li><a href='#'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Services</a></li> <li><a href='#'>Contact</a></li> </ul> </div> </div> </li> </ul> <div class="clear"></div> </div> 

Hope this helps!