Keep sub-menu active after mouseout - html

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>Home</li>
<li>my Links
<ul>
<li>Link 1</li>
<li>Link 2</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.

Answer 1

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>Home</li>
<li><a id="hover1" href="#">my Links</a>
<ul id="visible1">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li><a id="hover2" href="#">Our Links</a>
<ul id="visible2">
<li>Link 3</li>
<li>Link 4</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");
}
);

Answer 2

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.