Hi Debbie,
After looking at your image this is how I understand that you want the hover states to behave.
I’m using ul:hover to hide the current page settings when hovering on any other main list items. At the same time the ul:hover resets the current page settings when you hover on it.
These are the key styles that make that happen:
#nav .current ul {margin:0}/*reveal current page sublist on page load*/
#nav li:hover ul {
margin:0; /*reveal all other sublist on hover*/
z-index:10;/*Stack the hovered sublist above the current page sublist*/
}
#nav:hover .current a {/*hide initial current page settings when hovering on other main list items*/
color: #4682B4;
background: #E6E6FF;
}
#nav:hover .current:hover a { /*keep initial current page settings while hovering on it*/
color: #FFF;
background: #4682B4;
}
And here is a working example, only tested in FF at the moment but I will do some more testing to make sure it’s working correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dropline Subnav</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 100%/1.3 arial, helvetica, sans-serif;
}
h1 {
margin:10px 0;
font-size:1.5em;
text-align:center;
}
h1 small {display:block;}
/* #E6E6FF; /* Blue Gray (Lighter) */
/* #4682B4; /* Steel Blue (Darker) */
/*=== Begin Nav Styles ===*/
#nav {
position:relative;
width: 980px;
margin: 30px auto;
padding: 0;
list-style: none;
background: #E6E6FF;
border-bottom: 36px solid #4682B4;/*landing pad for dropline*/
}
#nav:after {/*containing floats w/out overflow*/
content:"";
clear:both;
display:block;
height:0;
font-size:0;
}
#nav li {
float:left;
font: bold 14px/18px arial, helvetica, sans-serif;
}
#nav a {
float: left;
width: 140px;
padding: 9px 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #4682B4;
}
#nav .current a {
color:#FFF;
background: #4682B4;
}
#nav li:hover a {
color: #FFF;
background: #4682B4;
}
/*--- Begin Dropline Styles ---*/
#nav ul {
position: absolute;
left:0;
top:100%;
width: 980px;
margin: 0 0 0 -999em;
padding:0;
list-style: none;
background: #4682B4; /*Steel Blue (Darker)*/
}
#nav .current ul {margin:0}/*reveal current page sublist on page load*/
#nav li:hover ul {
margin:0; /*reveal all other sublist on hover*/
z-index:10;/*Stack the hovered sublist above the current page sublist*/
}
#nav:hover .current a {/*hide initial current page settings when hovering on other main list items*/
color: #4682B4;
background: #E6E6FF;
}
#nav:hover .current:hover a { /*keep initial current page settings while hovering on it*/
color: #FFF;
background: #4682B4;
}
#nav li li a {
width:auto;
min-width:140px;
padding: 9px 0;
}
#nav li li a:hover { /*target the sublist anchors with any style on hover*/
text-decoration:underline;
}
</style>
</head>
<body>
<h1>Dropline Nav<small> with Initial Current Page Highlighting </small></h1>
<ul id="nav">
<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="#">Gov't</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="#">Smal 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="#">MBA</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="#">Suzt 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>
</body>
</html>
however I want to become a “jedi” like you and Paul O’ with CSS!!!