Having trouble with top level link staying active when hovering sublinks

HTML & CSS
1

Hi,

I have got a horizontal drop down menu working as it should but just can’t seem to get the top level links to stay on when the sublinks are hovered over.
The top level links on hover have a white background but this disappears when i hover over the sublinks, except when the top level is ‘active’.
I think i’ve tried every permutation I can think of but without success…if someone can take a quick look over the code maybe something obvious that i’m missing will surface…

HTML:


<div class="menu">
<ul>
    <li><a href="#" title="About us"><span>About us</span></a>
    <!--[if lte IE 6]>
    <a href="#" title="About us">About us<table><tr><td>
    <![endif]-->
    <ul>
       <li><a href="#" title="Quotes" class="Quotes "><span>Quotes</span></a></li>
       <li><a href="#" title="History" class="History "><span>History</span></a></li>
       <li class="last"><a href="#" title="Press" class="Press "><span>Press</span></a></li>
    </ul>
    <!--[if lte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
  </li>
  <li><a href="#" title="Booking" class="Booking "><span>Booking</span></a></li>
  <li><a href="#" title="Contact" class="Contact "><span>Contact</span></a></li>
 </ul>
</div>

CSS:

.menu {
padding:0 0 67px;
width:800px; 
position:relative;
z-index:100;
text-transform: uppercase;
font-weight: bold;
height: 23px;
border-top:3px solid #fff;
border-bottom:1px solid #fff;
font: Helvetica, Arial, sans-serif;
font-size: 89&#37;;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* Set the background color and the font size*/
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:left; 
text-decoration:none;  
height:23px;  
line-height:23px;
padding: 0 13px;
color: #fff;
}
.menu ul li a:hover, .menu ul li.active a, .menu ul li.active a ul li a:hover {color: #000; background: #fff;}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a, .menu ul li.active a{
background-position: 0px 0px;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block; 
position:absolute; 
top:23px; 
left:0px; 
width:120px;
background:#fff;
padding: 0 5px;
}
.menu li li {float:none;}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block; 
background:#fff; 
color:#000;
padding: 4px 8px 0 8px;
line-height: 9px;
margin:0px;
font-size: 90%;
height: 16px;
}
.menu ul li:hover ul li a span {padding-left: 4px;}
.menu ul li:hover ul li a
.menu ul li ul li.last {padding-bottom: 2px;}
/* style the background and foreground colors of the links on hover */
.menu ul li:hover ul li a:hover {
color:#feba12;
}

Thanks for any help

G

2

Hi,

yes that’s got it working Paul…thanks, and thanks for the suckerfish link too it looks pretty informative.

Much appreciated

3

For IE6 you would need to float the anchors on the top level to stop them expanding to 100% width of the screen. Then also for IE6 review the conditional comment code as it doesn’t seem to be correct.

You would also need to remove the “li” from the li:hover styles for IE6 because its the nested anchor that hovers in IE6 and you should just be using :hover with no selector.

See Stu Nichols site (CSS Play) for the full code or switch to the suckerfish menus instead if you don’t understand how they work.

4

Do you mean this?


.menu ul li:hover a, .menu ul li.active a {
    background-position: 0px 0px;
 [B]   background:#fff;
    color:#000;[/B]
}
5

Hi,
The trick to keeping the parent LI highlighted when child links are hovered is to use li:hover

IE6 does not support :hover on anything but anchors so it needs a little js help if you need to support it.

Something like this should show you the basics of how it works.

http://www.css-lab.com/demos/nav/easy-dropdown.html
http://www.css-lab.com/demos/nav/easy-dropdown-2.html

Those are based off of the suckerfish dropdown menus, to make things a little more advanced and to support IE6 you can do something like this.

http://www.css-lab.com/demos/nav/sf-drpdwn.html
http://www.css-lab.com/demos/nav/cntr-float-drpdwn.html

Dropdowns can be intimidating at first but the thing to remeber is that you must always reset the styles for the sublists so they don’t inherit from the parent. View the page source of those demos for the css/html.