如何在以下场景中显示主菜单悬停时的子菜单项？

Question

I have taken dump of bootstrap3 for menubar.

Its working fine, onclick of main-menu it is displaying sub menu-items. But what i want is, on hover of main-menu sub menu-items should be displayed. Following is code of onclick working menu bar:

<div class="jumbotron">
      <div class="container">
        <p class="lead">Grid Example</p>
        <!-- Grid demo navbar -->
        <div class="navbar navbar-default yamm">
          <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="#" class="navbar-brand">Yamm Megamenu</a>
          </div>
          <div id="navbar-collapse-grid" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <!-- Grid 12 Menu -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Grid<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-12">.col-sm-12</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6">.col-sm-6</div>
                      <div class="col-sm-6">.col-sm-6</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-4">.col-sm-4</div>
                      <div class="col-sm-4">.col-sm-4</div>
                      <div class="col-sm-4">.col-sm-4</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                      <div class="col-sm-3">.col-sm-3</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                      <div class="col-sm-2">.col-sm-2</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                      <div class="col-sm-1">.col-sm-1</div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <With>Offsets </With>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Offset<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-4">4</div>
                      <div class="col-sm-4 col-sm-offset-4">4 offset 4</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
                      <div class="col-sm-3 col-sm-offset-3">3 offset 3</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-6 col-sm-offset-3">6 offset 6</div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <Aside>Menu </Aside>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Aside<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-3"><br>
                        <h3>3</h3><br>
                      </div>
                      <div class="col-sm-9"><br>
                        <h3>9</h3><br>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
              <!--
              <Nesting>Menu </Nesting>
              -->
              <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Nesting<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li class="grid-demo">
                    <div class="row">
                      <div class="col-sm-12">12</div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12">12
                        <div class="row">
                          <div class="col-sm-4">4</div>
                          <div class="col-sm-4">4</div>
                          <div class="col-sm-4">4</div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

Javascript is as following:

<script>
      $(function() {
        window.prettyPrint && prettyPrint()
        $(document).on('click', '.yamm .dropdown-menu', function(e) {
          e.stopPropagation()
        })
      })
    </script>

can any one help me out to resolve this. Thanks in advance.

Answer 1

Try This one:

 <script>
         $("#nav li").hover(
        function(){
            $(this).children('ul').hide();
            $(this).children('ul').slideDown('slow');
        },
        function () {
            $('ul', this).slideUp('slow');            
        });
 </script>

and make your as like this

<ul id="nav">