Keep sub-menu active after mouseout

Question

When a user hovers over my horizontal menu, how can I keep the sub-menu open until another menu item is hovered over? Here is the source code:

HTML

 <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a href="#">my Links</a>
     <ul>
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
 </ul>

CSS

#nav {
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;
}
#nav li {
    float:left;
    list-style:none;
    display:inline
}
#nav a {
    text-decoration:none;
}
#nav li ul li a {
    margin:0
}
#nav .active a, #nav li:hover>a {
    background:#ac2024;
    color:#fff;
}
#nav li a:hover, #nav ul a:hover {
    background:#ac2024;
    color:#fff
}
#nav ul {
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;
}
#nav li:hover>ul {
    display: inline;
}
#nav ul a {
    width:100%
}
#nav:after {
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0
}
#nav {
    display:inline-block
}

If this is not possible with CSS, how can it be done with jQuery? Thanks.

This sounds like something you will have to do with a bit of JS. With that said, what happens if you apply a display: block !important to the a:hover element? — terrorfall, Apr 20 '14 at 10:29
So you want to remove the first set of rollover links being shown, and then show the second set? Or do you want to have all sub menus visible when you rollover a parent menu? It's probably best of you post the final navigation HTML and a description of what you want to achieve. Rather than us trying to code with moving goal posts — terrorfall, Apr 20 '14 at 20:01
No, I do not want to keep all sub menus visible, I want when hover on first set of rollover links, they shown and when hover on second set, the first set should be hide and second keep active. — user3384093, Apr 21 '14 at 05:04
What would you want to happen if someone rolled over the first menu again? Disable the second child elements and display the first again? If that's the case I have updated the answer below — terrorfall, Apr 21 '14 at 11:01

terrorfall · Answer 1 · 2014-04-21T11:05:55.963

6

Based on your updated question, modified answer below.

You'll need to add a small amount of JS as mentioned in my comment, please see here for demo

JSFiddle (updated)

Updated HTML:

  <ul id="nav">
   <li><a href="/">Home</a></li>
   <li><a id="hover1" href="#">my Links</a>
     <ul id="visible1">
       <li><a href="Link1">Link 1</a></li>
       <li><a href="Link2">Link 2</a></li>
     </ul>
   </li>
   <li><a id="hover2" href="#">Our Links</a>
     <ul id="visible2">
       <li><a href="Link1">Link 3</a></li>
       <li><a href="Link2">Link 4</a></li>
     </ul>
   </li>
 </ul>

Updated CSS:

    #nav {
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;
}
#nav li {
    float:left;
    list-style:none;
    display:inline
}
#nav a {
    text-decoration:none;
}
#nav li ul li a {
    margin:0
}
#nav .active a, #nav li:hover>a {
    background:#ac2024;
    color:#fff;
}
#nav li a:hover, #nav ul a:hover {
    background:#ac2024;
    color:#fff
}
#nav ul {
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;
}
#nav li:hover>ul {
    display: inline;
}
#nav ul a {
    width:100%
}
#nav:after {
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0
}
#nav {
    display:inline-block
}
.result_hover {
    display:block !important;
}

Updated JQuery:

$("#hover1").hover(
  function () {
      $("#visible1").addClass("result_hover");
      $("#visible2").removeClass("result_hover");
  }
);

$("#hover2").hover(
  function () {
      $("#visible2").addClass("result_hover");
      $("#visible1").removeClass("result_hover");
  }
);

edited Apr 21 '14 at 11:05

answered Apr 20 '14 at 10:47

terrorfall

1,121
3
16
33

This is not working – user3384093 Apr 20 '14 at 14:47
So you want to remove the first set of rollover links being shown, and then show the second set? Or do you want to have all sub menus visible when you rollover a parent menu? – terrorfall Apr 20 '14 at 19:15
Thank you Pete, this is really I want, but it make problem when adding visible3, visible4 etc. more section, you can see updated jsfiddle. Like if user first hover on visible3 links and then go to visible1 or visible2, all links mesh.. iS there any short code to do this – user3384093 Apr 21 '14 at 12:38
You're missing the removeClass elements from your JS, you need to add these in for each new menu. See updated JSFiddle here http://jsfiddle.net/MzZ4p/13/ – terrorfall Apr 21 '14 at 17:03
Thank you Pete, but this is not working on mobile, on the mobiles, the sub menu can not be active, this is working on desktop only. Have you any solution for this ? Please help.. – user3384093 Apr 24 '14 at 15:06
It won't work on mobile because you're reliant on hover (which mobiles aren't great at). For mobile you want to base it on a click instead. – terrorfall Apr 24 '14 at 15:10
Ok, can you give me click base code for mobile, I want to keep hover for desktop also ? Thanks – user3384093 Apr 25 '14 at 07:44
You're asking several different questions here. Better if you do some Googling. See this question as well. http://stackoverflow.com/questions/12186892/hover-and-click-event-on-mobile-devices – terrorfall Apr 25 '14 at 07:53

score 3 · Answer 2 · answered Apr 20 '14 at 10:34

I don't think you could achieve that only with CSS.

The solution that I thing about from the top of my head is to add class 'hover-class' to the li item via jQuery, and while hovering on new menu item adding 'hover-class' to the new item and removing it from the old one. You should keep track in JS what's the last item that has been hovered and manipulat view based on this data.

But maybe someone will suprise me and give solution only in CSS :) Hope it helps.

Keep sub-menu active after mouseout

2 Answers2