animation of bootstrap nav menu in jquery

Question

 <script>
	$(document).ready(function(e) {
        	$('#about_menu').hover(function(){
			$('#about_sub_menu').toggle('slow')
			
		});
		$('#admission_menu').hover(function(){
			$('#admission_sub_menu').toggle('slow')
			
		});
		$('#student_menu').hover(function(){
			$('#student_sub_menu').toggle('slow')
			
		});	
    });

<div class="collapse navbar-collapse ">
                        <ul class="nav navbar-nav">
                            <li><a href="index.php">Home</a></li>
                            <li class="dropdown" ><a id="about_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">About Us <span
                             class="caret">
                            </span></a>
                            <ul class="dropdown-menu" id="about_sub_menu">
                            <li><a href="introduction.php">Introduction</a></li>
                            <li><a href="location.php"> Location</a></li>
                            <li><a href="board-of-governors.php"> Board Of Governors</a></li>
                            <li><a href="vp-message.php"> VP Message</a></li>
                            </ul>                
                            </li>
                            <li class="dropdown"><a id="admission_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Admissions<span 
                            class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" id="admission_sub_menu" >
                            <li><a href="criteria.php">Criteria</a></li>
                            <li><a href="fee-structure.php">Fee Structure</a></li>
                            <li><a href="paper-pattern.php">Paper Pattern</a></li>
                            <li><a href="student-reg-form.php">Student Registration Form</a></li>
                            </ul>
                            </li>
                            <li class="dropdown"><a id="student_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Students <span 
                            class="caret"></span></a>
                            <ul class="dropdown-menu" id="student_sub_menu">
                            <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Academics</a>
                            <ul class="dropdown-menu">
                            <li class="menu-item"><a href="syllabus.php">Syllabus</a></li>
                            </ul>
                            </li>
</ul>

hello all!!

i am just beginner in bootstrap and jquery.

i want to animate the navigation menu which i built in bootstrap. but when i hover on Li then it shows me the submenus.

but the problem is that when i want to hover on submenu then it disappears. i want that when i hover on submenu then it shouldn't disappear and when i leave the mouse cursor from Li or submenu and hover on another li then the previous submenu should disappear.

i would really appreciate your help and thanks in advance.

regards naveed ali

Answer 1

You have to bind hover event to li.dropdown elements. Sub-menu's are not under a elements and if you hover a sub-menu, you trigger mouseout event of a element. If you use li.dropdown when you hover li and sub-menu appears it also widens the area of li (because sub-menu is inside that li) and you mouse pointer won't get outside of li.

BTW you can use .dropdown directly to bind hover event. No need for binding them with their id's.

  $(document).ready(function(e) {
    $('.dropdown').hover(function() {
      $('ul', this).stop(true, true).toggle('slow');
    });
  });

ul.nav > li {
  display: inline-block;
}
ul.nav > li > ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse ">
  <ul class="nav navbar-nav">
    <li><a href="index.php">Home</a>
    </li>
    <li class="dropdown"><a id="about_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">About Us <span
                             class="caret"></span></a>
      <ul class="dropdown-menu" id="about_sub_menu">
        <li><a href="introduction.php">Introduction</a>
        </li>
        <li><a href="location.php"> Location</a>
        </li>
        <li><a href="board-of-governors.php"> Board Of Governors</a>
        </li>
        <li><a href="vp-message.php"> VP Message</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a id="admission_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Admissions<span 
                            class="caret"></span>
                            </a>
      <ul class="dropdown-menu" id="admission_sub_menu">
        <li><a href="criteria.php">Criteria</a>
        </li>
        <li><a href="fee-structure.php">Fee Structure</a>
        </li>
        <li><a href="paper-pattern.php">Paper Pattern</a>
        </li>
        <li><a href="student-reg-form.php">Student Registration Form</a>
        </li>
      </ul>
    </li>
    <li class="dropdown"><a id="student_menu" class="dropdown-toggle" data-toggle="dropdown" href="#">Students <span 
                            class="caret"></span></a>
      <ul class="dropdown-menu" id="student_sub_menu">
        <li class="dropdown dropdown-submenu"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Academics</a>
          <ul class="dropdown-menu">
            <li class="menu-item"><a href="syllabus.php">Syllabus</a>
            </li>
          </ul>
        </li>
      </ul>