keep submenu showing while mouseover

Question

I have a little issue here,

I have a menu, and I want to display the submenu inside a div with class .submenuWrap. If the menu item has submenu, It will display the submenu in this .submenuWrap, if the menu item does not have submenu, the .submenuWrap won't show at all.

What I can't work out how to do is to keep this .submenuWrap showing while I am moving around the submenu, as at the moment, as soon as I leave the navigation, it disappears.

I put everything in a jsfiddle as it is much easier to follow:

html

<nav id="mainNav" role="navigation">
  <div class="container">
    <div id="mainMenu" class="collapse navbar-collapse">
      <ul class="nav">
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Buy Wine</a>
          <div class="dropdown-menu">
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Country</a></dt>
                <dd><a href="#" data-abbr="ar">Argentina</a></dd>
                <dd><a href="#" data-abbr="au">Australia</a></dd>
                <dd><a href="#" data-abbr="it">Italy</a></dd>
                <dd><a href="#" data-abbr="fr">France</a></dd>
                <dd><a href="#" data-abbr="es">Spain</a></dd>
                <dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Type</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Something</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
            <div class="col-sm-3 col-xs-12">
              <dl>
                <dt><a href="#">By Price</a></dt>
                <dd><a href="#">£0 - £50</a></dd>
                <dd><a href="#">£50 - £100</a></dd>
                <dd><a href="#">£100 - £200</a></dd>
                <dd><a href="#">£200 - £500</a></dd>
                <dd><a href="#">£500+</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">en primeur</a>
          <div class="dropdown-menu">
            <div class="col-sm-6 col-xs-12">
              <dl>
                <dt><a href="#">PIRULO</a></dt>
                <dd><a href="#" data-abbr="ar">Argentina</a></dd>
                <dd><a href="#" data-abbr="au">Australia</a></dd>
                <dd><a href="#" data-abbr="it">Italy</a></dd>
                <dd><a href="#" data-abbr="fr">France</a></dd>
                <dd><a href="#" data-abbr="es">Spain</a></dd>
                <dd><a href="#" data-abbr="gb">United Kingdom</a></dd>
              </dl>
            </div>
            <div class="col-sm-6 col-xs-12">
              <dl>
                <dt><a href="#">PIRULA</a></dt>
                <dd><a href="#">Red</a></dd>
                <dd><a href="#">White</a></dd>
                <dd><a href="#">Rose</a></dd>
                <dd><a href="#">Sparkling</a></dd>
                <dd><a href="#">Port</a></dd>
              </dl>
            </div>
          </div>
        </li>
        <li><a href="#">latest offers</a></li>
        <li><a href="#">what's new</a></li>
        <li><a href="#">our blog</a></li>
        <li><a href="#">services</a></li>
      </ul>
    </div>
    <div class="submenuWrap"></div>
  </div>
</nav> 

css

   #mainNav {
     background-color: $white;
   border-top: 5px solid black;
   border-bottom: 5px solid black;
   }
  #mainMenu > ul {
      display: table;
         width: 100%;
         margin-bottom: 0;
  }
  #mainMenu > ul > li {
      display: table-cell;
  }
   #mainMenu > ul > li > a {
           text-align: center;
  }

  .submenuWrap {
    position: absolute;
    background-color: khaki;
       width: 98%;
       border-left: 5px solid #333333;
       border-right: 5px solid #333333;
       background-color: $white;
       margin: 0 auto;
       top: 50px;
       right: 0;
       left: 0;
       border-top: 0;
       display:block;
       z-index:6;       
     }

js

 var submenu = $(this).next(".dropdown-menu").html();
 $( "#mainMenu .dropdown-toggle" ).on({
    mouseover: function() {
    submenu = $(this).next(".dropdown-menu").html();
  }, mouseenter: function() {
     $(".submenuWrap").html(submenu).css("border-bottom", "5px solid black");
  }, mouseleave: function() {
     $(".submenuWrap").html("").css("border-bottom", "0");
  }
});

I have tried adding this:

 $( ".submenuWrap" ).on({
     mouseover: function() {
       $(this).css("display", "block");
  }, mouseleave: function() {
        $(this).css("display", "none");
  }
});

But it does nothing, and I don't understand why either.

https://jsfiddle.net/yLpLfp9w/

Does anyone can give me a hand?

Thank you

Answer 1

There's something wrong with your jsfiddle code, the menu html isn't showing, just a black bar, so here's a great example on CSS tricks here for how a jQuery drop down menu can work: https://css-tricks.com/examples/SimplejQueryDropdowns/

With code here: http://css-tricks.com/examples/SimplejQueryDropdowns.zip

I'll create a fiddle with the above code here:

$(function(){

    $("ul.dropdown li").hover(function(){
    
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    
    }, function(){
    
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    
    });
    
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");

});

*          { margin: 0; padding: 0; }
body        { font: 14px Helvetica, Sans-Serif; } 
#page-wrap       { width: 800px; margin: 25px auto; } 
a         { text-decoration: none; }
ul         { list-style: none; }
p                                   { margin: 15px 0; }

/* 
 LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover              { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
            color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
 LEVEL TWO
*/
ul.dropdown ul       { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li      { font-weight: normal; background: #f6f6f6; color: #000; 
           border-bottom: 1px solid #ccc; float: none; }
           
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a     { border-right: none; width: 100%; display: inline-block; } 

/* 
 LEVEL THREE
*/
ul.dropdown ul ul      { left: 100%; top: 0; }
ul.dropdown li:hover > ul    { visibility: visible; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 <title>Simple jQuery Dropdowns</title>
 
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>
 <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->
   
 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 
 <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>

<body>

 <div id="page-wrap">
 
        <img src="images/title.png" alt="Simple jQuery Dropdowns" />
        
        <p><a href="index-hoverIntent.html">With hoverIntent</a> | <a href="http://css-tricks.com/simple-jquery-dropdowns/">Article</a> | <a href="http://css-tricks.com/examples/SimplejQueryDropdowns.zip">Download</a></p>     

        <ul class="dropdown">
         <li><a href="#">For Facilities</a>
          <ul class="sub_menu">
            <li><a href="#">Artificial Turf</a></li>
            <li>
            <a href="#">Batting Cages</a>
            <ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>
            </li>
            <li><a href="#">Benches &amp; Bleachers</a></li>
            <li><a href="#">Communication Devices</a></li>
            <li><a href="#">Dugouts</a></li>
            <li><a href="#">Fencing &amp; Windscreen</a></li>
            <li><a href="#">Floor Protectors</a></li>
            <li><a href="#">Foul Poles</a></li>
            <li><a href="#">Netting</a></li>
            <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
            <li><a href="#">Outdoor Signs</a></li>
            <li><a href="#">Padding</a></li>
            <li><a href="#">Scoreboards</a></li>
            <li><a href="#">Shade Structures</a></li>
            <li><a href="#"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="#">Field Maintenance</a>
          <ul class="sub_menu">
           <li><a href="#">All-in-One Team Cart</a></li>
           <li><a href="#">Air &amp; Electrical Reels</a></li>
            <li><a href="#">Field Drags</a></li>
            <li>
            <a href="#">Field Marking Equipment</a>
            <ul>
             <li><a href="#">Batter's Box Templates</a></li>
             <li><a href="#">Dryline Markers</a></li>
             <li><a href="#">Field Paint</a></li>
             <li><a href="#">Field Sprayers</a></li>
             <li><a href="#">Stencils</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Field Tarps</a>
            <ul>
             <li><a href="#">Area Tarps</a></li>
             <li><a href="#">Growth Covers / Protectors</a></li>
             <li><a href="#">Infield Tarps</a></li>
             <li><a href="#">Tarp Accessories</a></li>
            </ul>
            </li>
            <li><a href="#">Hand Tools</a></li>
            <li>
            <a href="#">Irrigation, Hoses, Nozzles</a>
            <ul>
             <li><a href="#">Hoses &amp; Hose Reels</a></li>
             <li><a href="#">Irrigation</a></li>
             <li><a href="#">Nozzles</a></li>
            </ul>
            </li>
            <li><a href="#">Layout &amp; Measurement Tools</a></li>
            <li><a href="#">Moisture Removal</a></li>
            <li><a href="#">Mound &amp; Home Plate Fortification</a></li>
            <li><a href="#">Mowers &amp; Stripers</a></li>
            <li><a href="#">Soil &amp; Enviornmental Management</a></li>
            <li><a href="#">Soil Amendments</a></li>
            <li><a href="#">Spreaders &amp; Sweepers</a></li>
            <li><a href="#"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="#">Game-Practice Equipment</a>
          <ul class="sub_menu">
            <li>
            <a href="#">Baseball - Softball</a>
            <ul>
             <li><a href="#">Base Accessories</a></li>
             <li><a href="#">Bases &amp; Home Plates</a></li>
             <li><a href="#">Game Accessories</a></li>
             <li><a href="#">Pitching Rubbers</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Batting Practice Equipment</a>
            <ul>
             <li><a href="#">Backstops</a></li>
             <li><a href="#">Infield Screens</a></li>
             <li><a href="#">Jugs Pitching Machines</a></li>
             <li><a href="#">Turf Mats</a></li>
             <li><a href="#">Turf Protectors</a></li>
             <li><a href="#">Replacement Accessories</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Batting Cages</a>
            <ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Portable Mounds</a>
            <ul>
             <li><a href="#">Batting Practice Mounds</a></li>
             <li><a href="#">Game Mounds</a></li>
             <li><a href="#">Practice Mounds</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Football</a>
            <ul>
             <li><a href="#">First Down Markers</a></li>
             <li><a href="#">Football Accessories</a></li>
             <li><a href="#">Football Goalposts</a></li>
            </ul>
            </li>
            <li>
            <a href="#">Soccer</a>
            <ul>
             <li><a href="#">Soccer Goals</a></li>
             <li><a href="#">Soccer Accessories</a></li>
            </ul>
            </li>
            <li><a href="#"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="#">Training &amp; Conditioning</a>
          <ul class="sub_menu">
            <li><a href="#">Ladders &amp; Sticks</a></li>
            <li><a href="#">Hurdles</a></li>
            <li><a href="#">Training Accessories</a></li>
            <li><a href="#">Smart-Cart Training System</a></li>
            <li><a href="#">Smart-Hurdle Collection</a></li>
            <li><a href="#"> - VIEW ALL - </a></li>
          </ul>
         </li>
         <li><a href="#">Books-Videos</a>
          <ul class="sub_menu">
            <li><a href="#">Field Design &amp; Maintenance</a></li>
            <li><a href="#">Turf Management</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#"> - VIEW ALL - </a></li>
          </ul>
         </li>
        </ul>
  
 </div>

</body>

</html>

The above code adds a class to the top level ul called "hover", and this way you can use css to keep the first submenu open. Hovering on a submenu ul then changes its visibility to "visible" while keeping the class "hover" on the top level ul.

You can add hoverIntent which delays opening the menu a little, stopping accidental menu opens, but this isn't required.

In your case, make sure the top level ul gets its "hover" class removed only when you hover away from that element and its children (again, see the example I posted).