As Dresden said you would need to turn the current tab off when the main menu is hovered but is a little clumsy because you then have to follow all the way through.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Top Menu Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* ----- MAIN MENU ----- */
#topMenu {
width: 1200px; /* Same size as Max-width on #wrapper. */
min-height: 0; /* haslayout IE7 for float containment. */
margin: 0;
padding: 0;
list-style: none;
background: #E6E6FF; /* Blue Gray (lighter) */
border-left: 1px solid #4682B4; /* Steel Blue (darker) */ /* NEW */
border-bottom: 1px solid #4682B4; /* Steel Blue (darker) */ /* NEW */
}
/* Still do not understand this! */
#topMenu:after { /* Contain floats without overflow. */
content: "";
clear: both;
display: block;
height: 0;
font-size: 0;
}
#topMenu li {
position: relative; /* Set containing block for Submenu. */
float: left;
/* width: 110px; /* Remove this if "Fluid" Top Menu is desired. */
padding: 0 1em; /* Tweak?? */
border-top: 1px solid #4682B4; /* Steel Blue (darker) */ /* NEW */
border-right: 1px solid #4682B4; /* Steel Blue (darker) */ /* NEW */
}
/* NEW */
#topMenu li.current, #topMenu li:hover {
background: #4682B4; /* Steel Blue (darker) */
}
/* NEW */
#topMenu li.current a, #topMenu li:hover a {
color: #FFF;
}
#topMenu a {
display: block; /* Allows Text Centering. */
padding: 0.5em 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #4682B4; /* Steel Blue (darker) */
font-weight: bold;
}
/* ----- SUB-MENU ----- */
#topMenu li ul {
position: absolute;
left: 0;
top: 100%; /* ??? */
margin-top: -999em; /* Hide Submenu */
padding: 0;
list-style: none;
background: #E6E6FF; /* Blue Gray (lighter) */
}
#topMenu li:hover ul {
margin-top: 0; /* Unhide Submenu. */
}
#topMenu li ul li {
float: none; /* Set up Hover Styling. */
display: block;
width: auto; /* Increase Sub-Menu Width to fit Text. */
min-width: 110px; /* Make same as (or greater than) #topMenu li. */
padding: 0 1em;
border: 0px solid #4682B4; /* Over-ride Parent Border. */ /* NEW */
}
#topMenu li ul li a {
text-transform: none;
white-space: nowrap; /* Prevent Sub-Menu Text from Wrapping! */
text-align: left; /* NEW */
}
#topMenu li.current, #topMenu li.current:hover, #topMenu li:hover {
background: #4682B4;
}
#topMenu li, #topMenu:hover .current {
background:#E6E6FF;
}
#topMenu:hover .current a {
color:#4682B4
}
#topMenu li.current:hover a {
color:#fff
}
#topMenu li ul li:hover {
float: none;
display: block;
background: #4682B4; /* Steel Blue (darker) */
}
#topMenu li:hover ul li a, #topMenu li.current:hover ul li a {
color: #4682B4; /* Steel Blue (darker) */
}
#topMenu li ul li:hover a, #topMenu li.current ul li:hover a {
float: none;
display: block;
color: #FFF;
font-weight: 700;
}
/*
*/
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="inner">
<div id="header">
<h1>ACME, Inc.</h1>
<p>You are currently on the "News" page...</p>
<ul id="topMenu">
<li class="current"><a href="#">News</a>
<ul>
<li><a href="#">Breaking</a></li>
<li><a href="#">Local</a></li>
<li><a href="#">U.S.</a></li>
<li><a href="#">World</a></li>
</ul>
</li>
<li><a href="#">Politics</a>
<ul>
<li><a href="#">Local</a></li>
<li><a href="#">White House</a></li>
<li><a href="#">Congress</a></li>
<li><a href="#">Govt</a></li>
<li><a href="#">Elections</a></li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Economy</a></li>
<li><a href="#">Markets</a></li>
<li><a href="#">Investing</a></li>
<li><a href="#">Small Biz</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Real Estate</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul>
<li><a href="#">NBA</a></li>
<li><a href="#">MLB</a></li>
<li><a href="#">NFL</a></li>
<li><a href="#">NHL</a></li>
<li><a href="#">NCAAF</a></li>
<li><a href="#">Golf</a></li>
</ul>
</li>
<li><a href="#">Travel</a>
<ul>
<li><a href="#">U.S.</a></li>
<li><a href="#">S. America</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia</a></li>
<li><a href="#">Australia</a></li>
<li><a href="#">Tips</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul>
<li><a href="#">Current</a></li>
<li><a href="#">Forecast</a></li>
<li><a href="#">U.S.</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Records</a></li>
</ul>
</li>
<li><a href="#">Opinion</a>
<ul>
<li><a href="#">Debbie D.</a></li>
<li><a href="#">Frank S.</a></li>
<li><a href="#">Suzy Q.</a></li>
<li><a href="#">Jane D.</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Reader Comments</a></li>
</ul>
</li>
</ul>
<!-- End of #TOPMENU -->
</div>
<!-- End of #HEADER -->
</div>
<!-- End of #INNER -->
</div>
<!-- End of #WRAPPER -->
</body>
</html>
That works but I’ve probably missed an easier way somewhere along the line:)
Rays example usually roughly the same method and the key line is this:
[B]#nav:hover[/B]
The change is made when hovering on the ul and not the list as per all the other rules.
In the code I gave that would be this element:
#topMenu:hover etc....
However the dropdown is more complicated than the dropline because it has colour changes on the nested lists to contend with and control unlike the dropline version which is simpler.
