asked on

menu css - adding hover effect to the active state

Here is my webpage that I want the top menu to have the hover style added to the active style, except on the home link.
http://www.callcarol.com/example3/product/
Here is the current code:

#mainMenu {
	position:absolute;
	left:-18px;
	top:0;
}

#mainMenu ul li{
	float:left;
}

#mainMenu ul li a {
	display:block;
	height:49px;
	color:#ccc;
	padding:36px 18px 0;
	font-size:17px;
	background:url(images/bk_mainmenu.png) 0 -78px no-repeat;
}

#mainMenu ul li a span {
	font-size:10px;	
	color:#999;
	line-height:120%;
}

#mainMenu ul li a:hover {
	text-decoration:none;
	background:url(images/bk_mainmenu.png) 0 0 repeat-x;
	color:#96DDFC;
}


#mainMenu ul li ul li a:hover{
	background:#132325;
}

Open in new window

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

carolsanjose

ASKER

Great...
http://www.callcarol.com/example3/demo/

BUT, is there an easy way to make it not work on the home button only?

carolsanjose

ASKER

Is there any way to make the active state removed while moving over the other menu items?
Right now, it looks like there are 2 highlighted at a time.

http://www.callcarol.com/example3/demo/

LZ1

Not easily without plugins or customizing WP. Normally you would use javascript or Jquery to handle the removing of the CSS classes while hovering. I would recommend searching for a nice menu plugin. There are tons!

carolsanjose

ASKER

okay...thank you.