I have a HTML ul banner that has two li sub-bars that are exposed on hover. However, if you mouse away from it or over another main entry, the hover is lost.
I was wondering if there was some way to easily maintain this hover after a mouse away. It's not something I can toss out so I'm very interested in extending it to support keeping it even after a mouse away for a few seconds, but being able to see new information if hovering over a different li element.
Here is my JSFiddle with an extremely simple demo with my HTML/CSS with the bare minimum to show off the feature: JSFiddle
<body>
<div class="nav-outer-repeat">
<div class="nav">
<div class="table">
<ul class="select">
<li style="color: white;"> <a><b>Hover Test</b></a>
<div class="select_sub">
<ul class="sub">
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
</ul>
<ul class="sub">
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
<li style="color: white;"><a href="">Test</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="content-outer">
<div id="content"></div>
</div>
#content-outer {
background: url(../../core/images/shared/content_repeat.jpg) repeat-x;
}
#content {
color: #333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
margin: 0 auto 0 auto;
max-width: 100%;
min-width: 780px;
padding: 15px 0px 25px 0px;
}
.nav-outer-repeat {
background: url(../../core/images/shared/nav/repeat.jpg) repeat-x;
height: 77px;
}
.nav {
float: left;
font-family: Tahoma;
font-size: 13px;
height: 38px;
position: relative;
width: 1080px;
min-width: 600px;
z-index: 500;
}
.nav-divider {
background: url(../../core/images/shared/nav/divider.jpg) top no-repeat;
float: left;
height: 40px;
width: 15px;
}
.nav .select,
.nav .current {
display: table-cell;
float: left;
list-style: none;
margin: 0 0px 0 0;
padding: 0;
white-space: nowrap;
}
.nav li {
float: left;
height: auto;
margin: 0;
padding: 0;
}
.nav .select a {
color: #fff;
display: block;
float: left;
height: 37px;
line-height: 35px;
padding: 0 0px 0 0px;
text-decoration: none;
white-space: nowrap;
}
.nav .select_sub {
display: none;
margin: 0 0 0 10px;
}
.nav .sub {
display: table;
list-style: none;
padding: 0;
}
.nav .select :hover .select_sub,
.nav .current .show {
background: url(../../core/images/shared/nav/back_0.gif);
height: 75px;
display: block;
left: 0;
padding: 0;
position: absolute;
text-align: left;
top: 37px;
width: 1200px;
z-index: 100;
transition:0s 50s;
}
.nav .select :hover .sub li a,
.nav .current .show .sub li a {
background: transparent;
border: 0;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
float: left;
margin: 0;
padding: 0 10px 0 10px;
white-space: nowrap;
}
.clear {
clear: both;
font-size: 0px;
height: 0;
line-height: 0px;
margin: 0px;
padding: 0px;
}
I think I'm most interested in some sort of time delay that it can stay on screen, but all my attempts have failed. I am hoping someone can give me some guidance on solving this with some CSS I may be missing, or perhaps some jQuery?
You can add different transitions on hover and on normal. Make sure you hide your menu with an animatable property! Display won't work and also be careful trying to go from for example, height: 0px; to height: auto;.
Here is one way to do it.
I've forked your fiddle. First I've removed the :hover states and then I added:
.nav .select_sub{
display: block;
}
.nav .select:hover .select_sub,
.nav .select:hover .sub li a{
margin-top: 0%;
transition: all 0.2s;
}
.nav .select .select_sub,
.nav .select .sub li a{
margin-top: -100%;
transition: all 2s 3s;
}
You can see I've hidden your menu with a large top margin. When you hover over .select the margin becomes zero in 0.2s, that should be fast enough for a good user experience.
When you stop hovering the submenu remains for three seconds and then goes back up ten times slower.