Nav Hover - Need help

Hi. I was wondering if someone can help me with a Navigation Hover. Below is my code for a Nav tab in two states. Normal and Active. The Normal state shows the top of a png file and the Active moves the png file up to show the bottom. This works fine. What I want to add is a Hover state the will do what the Active part does but obviously only when hovered. I've tried what I know but it didn't work.

/* Normal */

ul.mainlevel-nav li.root {
	background: url(../images/tab.png) 0 0;
	padding-left: 6px;
}

ul.mainlevel-nav li.root a.mainlevel-nav,
ul.mainlevel-nav li.root a.mainlevel_active-nav {
	background: url(../images/tab.png) 100% 0%;
	padding-left: 7px;
	color: #FFF;
}

/* Active */

ul.mainlevel-nav li#current-nav.root {
	background: url(../images/tab.png) 0 -41px;
	padding-left: 6px;
}

ul.mainlevel-nav li#current-nav a#active_menu-nav,
ul.mainlevel-nav li#current-nav a.mainlevel_active-nav {
	background: url(../images/tab.png) 100% -41px;
	padding-left: 7px;
	color: #FFF;
}

/* CLEAR Active */

ul.mainlevel-nav ul li#current-nav {
	background-image: none;
	padding: 0;
	margin: 0;
	color: #fff;
}

ul.mainlevel-nav ul li#current-nav a#active_menu-nav {
	background-image: none;
	padding: 0px 0px 0px 5px;
	margin: 0;
	color: #fff;
}

ul.mainlevel-nav {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	height: 28px;
	position: relative;
	top: 4px;
}

ul.mainlevel-nav li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;

Code (markup):

 

Not exactly sure what you mean, but you need to use the pseudo class "hover" to make a hover effect.

E.g:

ul.mainlevel-nav li:hover{
background:#000000;
}

Code (markup):

That will make the background color change to black on hover. You just add :hover after whatever class.

BP

 

Thank you blueparukia. That was what I thought I tried already but I looked closely at your suggestion and noticed that my syntax was wrong. Thank you thank you!

 

Are you aware that IE 6 has a parsing bug for the hover pseudo-class when used inside a UL?

Google up "hover.htc" for a solution.

 

Eh? I thought it was ALL elements excluding the anchor element for MSIE6.

 

so long as it's an anchor, you can hover with everybody.

However, the trick I tried didn't work-- empty anchors with "#" didn't set off IE : )


Soulscratch, I think he's meaning when people make hover properties without anchors. (My husband is learning/cursing CSS and he insists on using spans for links : (

 

I'm just confused by the use of #active - since :active is a psuedoclass. I'd probably name that something else if it's not supposed to be the same as :active, something like 'current' - otherwise I'd make it use the psuedoclass.

Oh, and to get IE working with hover states on everything other than anchors, the best of the lot is csshover2.htc from PeterNed since it also does :focus
http://www.xs4all.nl/~peterned/csshover.html

Specifically:
http://www.xs4all.nl/~peterned/htc/csshover2.htc

As to the problem, I'd really need to see more code (like the HTML) and maybe a screencap of what you WANT it to look like to make sense of your CSS - which right now looks somewhat more complicated than what it sounds like you are trying to do... What I'm seeing is class heavy, redundant, and in general 'overthought' - though without seeing the HTML that goes with it or what the end effect is supposed to be who can say for sure.