CSS Navigation

basic question im sure

[tonynoriega]

im creating from scratch, my first attempt.

im tired of cutting and pasting code and then i have to figure out how to modify it to my liking....so...

ive made a drop down menu.

when i hover over the UL LI A in the drop down, the main navigation background image dissapears, obviously becuase im not hovering over it...

how do i keep that background image persistent?

[rocknbil]

Navigation image in whole menu?

#menu {
margin:0;
padding:6px;
background: url(/path/to/image.jpg) top left no-repeat;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
}

#menu li a:link {
color: #ff0000;
/* and so on, for all link states */
}
....

<ul id="menu">
<li><a href="about.html">About</a></li>
<li><a href="contacthtml">Contact</a></li>
<!-- etc -->
</ul>

Or, navigation image for each link state?

#menu {
margin:0;
padding:6px;
}

#menu li {
margin:0;
padding:0;
list-style:none;
}

#menu li a {
margin:0;
padding:6px 12px 6px 12px;
list-style:none;
background: url(/path/to/no-hover.jpg) top left no-repeat;
}

#menu li a:link, #menu li a:active #menu li a:visited {
color: #ff0000;
background: url(/path/to/no-hover.jpg) top left no-repeat;
/* a:link may not be needed */
}

#menu li a:hover {
color: #00ff00;
background: url(/path/to/hover.jpg) top left no-repeat;
/* may not be needed */
}

[tonynoriega]

The background image for each navigation link state...

i tried what you provided, but did not seem to work, here was what i left off with

#nav{
width:995px;
height:113px;
margin:0 auto;
background:#fff url(images/nav-bg.jpg) 0 0 no-repeat;
font-family: Arial, sans-serif;
}

.menu {
width:740px;
margin-top:41px;
height:43px;

}

.menu ul {
width:100%;

}

.menu ul li {
width:185px;
float:left;
position:relative;
}

.menu ul li a.topnav:link, .menu ul li a.topnav:visited{
display:block;
height:43px;
width:184px;
color:#000;
text-align:center;

}
.menu ul li a.topnav:hover, .menu ul li a.topnav:active {
background:url(images/tab-bg.png) 19px 0 no-repeat;

}

.menu ul li ul {
visibility:hidden;
width:467px;
height:122px;
background:#0068b3;
padding:10px;
position:relative;
left:19px;

}

.menu ul ul li{
width:155px;
height:40px;
float:left;
margin:0 1px 1px 0;
padding:0;
}

.menu ul ul li a{
color:#fff;
text-decoration:underline;
font-size:13px;
font-weight:bold;
padding:15px 0 0 9px;
width:146px;
height:25px;
background:#1375bc url(images/arrow-off.png) 2px 17px no-repeat;
display:block;
}

.menu ul ul li a:hover{
color:#0068b3;
text-decoration:none;
background:#fff url(images/arrow-on.png) 0 0 no-repeat;

}

.menu ul li:hover ul, .menu ul li a:hover ul{
visibility:visible;
}

HTML

<div id="nav">

<div class="menu">

<ul>

<li><a href="#" class="topnav">Members</a></li>
<ul>
<li><a href="#">Health Insurance</a></li>
<li><a href="#">Behavioral Health</a></li>
<li><a href="#">Discount Services</a></li>
<li><a href="#">Dental Insurance</a></li>
<li><a href="#">Decision Support</a></li>
<li><a href="#">Health Library</a></li>
<li><a href="#">Medicare Insurance</a></li>
<li><a href="#">Wellness Support</a></li>
<li><a href="#">Disease Management</a></li>
</ul>

<li><a href="#" class="topnav">Brokers</a></li>
<li><a href="#" class="topnav">Employers</a></li>
<li><a href="#" class="topnav">Providers</a></li>

</ul>

</div>

</div><!--/nav-->

again, what is happening is that when i hover over the drop down menu selections, the main topnav background image dissapears...

[rocknbil]

Well, there's a couple things going on, you'll need to resolve these first. The link sent via PM doesn't work at all in FireFox (no drop down menus at all) but I think I might know why.

I don't have your images so I substituted background colors in the code below. First problem is this:

<ul>
<li><a href="#" class="topnav">Members</a></li>
<ul>

You have the ul "bare" between <li>'s, which is invalid and is probably why it's broken in FF. You need to nest that <ul> inside the <li>, like

<ul>
<li><a href="#" class="topnav">Members</a>
<ul>
<!-- the other li's for the nested URL -->
</ul>
</li>

Note how the first li "encapsulates" the nested li.

This, of course, changes everything. :-) you'll now need to modify your selectors like so:

.menu ul ul li{ <-- ul ul invalid

.menu ul li ul li{

.menu ul ul li a{ <-- ul ul invalid

.menu ul li ul li a{

.menu ul ul li a:hover{ <-- ul ul invalid

.menu ul li ul li a:hover{

As for the disappearing BG, you just need to add the :link selector:

.menu ul li a.topnav:link,.menu ul li a.topnav:hover, .menu ul li a.topnav:active {
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/
background:#ff0000; /*red */
}

I say "changes everything" because after making these changes it may not be the layout you expect, but here is what I have. It's definately hosed up in FF, the sub-menus are flowing down to the next lines.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html;  
charset=ISO-8859-1"> 
 <title>Untitled</title> 
<style type="text/css"> 
#nav{ 
width:995px; 
height:113px; 
margin:0 auto; 
/*background:#fff url(images/nav-bg.jpg) 0 0 no-repeat;*/ 
background:#c0c0c0; /*gray*/ 
font-family: Arial, sans-serif; 
} 
.menu { 
width:740px; 
margin-top:41px; 
height:43px; 
} 
.menu ul { 
width:100%; 
} 
.menu ul li { 
width:185px; 
float:left; 
position:relative; 
} 
.menu ul li a.topnav:link, .menu ul li a.topnav:visited{ 
display:block; 
height:43px; 
width:184px; 
color:#000; 
text-align:center; 
} 
.menu ul li a.topnav:link,.menu ul li a.topnav:hover,  
.menu ul li a.topnav:active { 
/*background:url(images/tab-bg.png) 19px 0 no-repeat;*/ 
background:#ff0000; /*red */ 
} 
.menu ul li ul { 
visibility:hidden; 
width:467px; 
height:122px; 
background:#0068b3; 
padding:10px; 
position:relative; 
left:19px; 
} 
.menu ul li ul li{ 
width:155px; 
height:40px; 
float:left; 
margin:0 1px 1px 0; 
padding:0; 
} 
.menu ul li ul li a{ 
color:#fff; 
text-decoration:underline; 
font-size:13px; 
font-weight:bold; 
padding:15px 0 0 9px; 
width:146px; 
height:25px; 
/*background:#1375bc url(images/arrow-off.png) 2px 17px no-repeat;*/ 
background:#e1ffe1; /*green */ 
display:block; 
} 
.menu ul li ul li a:hover{ 
color:#0068b3; 
text-decoration:none; 
/*background:#fff url(images/arrow-on.png) 0 0 no-repeat;*/ 
background:#d7ebff; /*lt blue */ 
} 
.menu ul li:hover ul, .menu ul li a:hover ul{ 
visibility:visible; 
}  
</style> 
</head> 
<body> 
<div id="nav"> 
 <div class="menu"> 
 <ul> 
 <li><a href="#" class="topnav">Members</a> 
 <ul> 
 <li><a href="#">Health Insurance</a></li> 
 <li><a href="#">Behavioral Health</a></li> 
 <li><a href="#">Discount Services</a></li> 
 <li><a href="#">Dental Insurance</a></li> 
 <li><a href="#">Decision Support</a></li> 
 <li><a href="#">Health Library</a></li> 
 <li><a href="#">Medicare Insurance</a></li> 
 <li><a href="#">Wellness Support</a></li> 
 <li><a href="#">Disease Management</a></li> 
 </ul> 
 </li> <!-- note the nesting changes, so do your selectors --> 
 <li><a href="#" class="topnav">Brokers</a></li> 
 <li><a href="#" class="topnav">Employers</a></li> 
 <li><a href="#" class="topnav">Providers</a></li> 
 </ul> 
 </div> 
</div><!--/nav-->  
</body> 
</html> 

[edited by: alt131 at 8:28 pm (utc) on Jan 24, 2012]
[edit reason] Side Scroll [/edit]

[tonynoriega]

Schweet. With those small tweaks it looks good in IE8 and i checked FF on a MAC and all is well.

Now, my thinking may be infantile here... with the selector a:link i added...

that put the background image on all of the main UL links, which i was trying to avoid.

i only want the background tab image to show up when you hover over the main UL LI, and when you are hover overing the nested UL LI A's they still keep the tab...

so if you arent necessarily hovering over the main UL LI, but you are hovering over the nested UL LI A, it still shows the tab..

if that makes sense...