menu css - adding hover effect to the active state

carolsanjose
carolsanjose used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2011
Commented:
I notice your using WordPress.  This may get you started: http://codex.wordpress.org/Dynamic_Menu_Highlighting 

What you could do also is use the native WP class current-menu-item and add it to your CSS like this:
#mainMenu ul li a:hover, .current-menu-item {
        text-decoration:none;
        background:url(images/bk_mainmenu.png) 0 0 repeat-x;
        color:#96DDFC;
}

Open in new window

Author

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

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

Author

Commented:
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
Top Expert 2011

Commented:
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!

Author

Commented:
okay...thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial