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.
Code:
<!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
Reply With Quote
Originally Posted by Paul O'B
Bookmarks