Keep top ul active in drop down while still hovering inside drop down

toolmania1

New Member
I have a drop down that is working in Firefox and IE. Now, I want to keep the top main link 'active' so to say when I am hovering over the sub links in the drop down itself.

Here is what I have so far that works:

<div id="slideShows" class="nav">
<ul>
<li><a href="./slideShows.php">Slide Shows</a>
<ul>
<li><a href="">Views</a></li>
<li><a href="">Else</a></li>
</ul>
</li>
</ul>
</div> <!-- /.nav -->

css:

a:link /* unvisited link */
{
color:#000000;
text-decoration:underline;
color:blue;
}

a:visited /* visited link */
{
color:#000000;
text-decoration:none;
}

a:hover /* mouse over link */
{
color:blue;
text-decoration:none;
}

a:active /* selected link */
{
color:#000000;
text-decoration:none;
}


/* For navigation bar drop downs */


.nav ul, .nav li
{
line-height: 25px;
list-style-type: none;
position: relative;
display: block;
z-index:1000; /* must have z-index so that this sits on top and then when hover it won't disappear */
}

.nav li
{
top: -10px;
left: 5px;
}

.nav ul ul
{
background-color: #B2E7F1;
top: 35px;
left: 0px;
position: absolute;
visibility: hidden;
}

.nav ul li
{
left: 0px;
padding: 5px;
position: relative;
display: block;
float: left;
list-style-type: none;
}


.nav li, .nav li a, .nav li a:hover, .nav li a:hover
{
min-width: 50px;
min-height: 25px;
padding: 0px;
position: relative;
display: block;
}

.nav li li, .nav li li a
{
position: relative;
top: 0px;
left: 0px;
color:blue;
}

.nav li li a:hover, .nav li li a:focus
{
position: relative;
top: 0px;
left: 0px;
color:white;
}

.nav ul li:hover ul, .nav ul li:focus ul
{
visibility: visible;
}

.nav ul li ul li:hover, .nav ul li ul li:focus
{
background-color: blue;
}


============

When hovering over "Views" or "Else", the "Slide Shows" loses it focus.

What happens when I first hover over the "Slide Shows" is that the underline goes away. But, when I move down to "Views", the underline for "Slide Shows" comes back. I don't want it to. How can I make "Slide Shows" stayed with no underline until I leave the whole drop down?
 

ronaldroe

Super Moderator
Staff member
You'll have to use the child selector for the submenu with the :hover state on the main li.

Like so:

nav li:hover > ul{
display:block;
/*whatever else*/
}
That causes the child ul to appear when the li is hovered. Should stay after that.
 
Top