Как я могу скользить вниз только на уровне меню=2 при наведении курсора на уровне меню=1 ? когда я mouseenter menu-level=1,все подменю скользят вниз . Как я могу решить эту проблему?
<div class="navbar navbar-inverse no-border bg0"> <div class="container-fluid"> <!---Brand and toggle get grouped for better mobile display---> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!--<div class="navbar-brand"> <a href="index.html"><img src="" class="img img-responsive" style=""><span>COMPANY LOGO</span></a> </div>--> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="menu"> <ul class="nav navbar-nav navbar-right"> <li menu-level="1"] class="active"><a href="index.html"><span data-hover="Home">Home</span></a></li> <li menu-level="1"><a href="about.html"><span data-hover="help">About Us </span></a></li> <li menu-level="1" class="dropdown drop1"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="login">Training Programmes </span></a> <ul class="dropdown-menu drop11"> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2" class="dropdown drop2"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Website Designing <span class="caret"></span></a> <ul class="dropdown-menu drop22"> <li menu-level="3"><a href="#">Website Designing</a></li> <li menu-level="3"><a href="#">Website Designing</a></li> <li menu-level="3"><a href="#">Website Designing</a></li> <li menu-level="3" class="dropdown drop3"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Website Designing</a> <ul class="dropdown-menu drop33"> <li menu-level="4"><a href="#">Website Designing</a></li> <li menu-level="4"><a href="#">Website Designing</a></li> <li menu-level="4"><a href="#">Website Designing</a></li> </ul> </li> <li menu-level="3"><a href="#">Website Designing</a></li> </ul> </li> <li><a href="#">Commerce Classes</a></li> </ul menu-level="2"> </li> <li menu-level="1" class="dropdown drop1"><a href="contact.html" class="dropdown-toggle" data-toggle="dropdown"><span data-hover="login">Contact Us</span></a> <ul class="dropdown-menu drop11"> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> <li menu-level="2"><a href="#">Website Designing</a></li> </ul> </li> <li menu-level="1"><a href="contact.html"><span data-hover="login">Testimonials</span></a></li> </ul> </div> </div> </div> </div>
Что я уже пробовал:
$(".drop1").mouseenter(function(){ $(".drop11").slideDown(); }).mouseleave(function(){ $(".drop11").slideUp(); }); $(".drop2").mouseenter(function(){ $(".drop22").slideDown(); }).mouseleave(function(){ $(".drop22").slideUp(); }); $(".drop3").mouseenter(function(){ $(".drop33").slideDown(); }).mouseleave(function(){ $(".drop33").slideUp(); });