Jump to content
Sign in to follow this  
yuthomas

Help with Hover over color of menu

Recommended Posts

yuthomas

Hi, I've been also trying to figure out a way to modify/add a code so that when I hover over a menu that has child sub-menus, both the main menu and the sub-menus light up and stay in the same color. e.g. (In my site http://bigfattunafish.com/) When you hover over "Sample Page", I would like both "Sample Page" and its sub-menus ("Test 1" and "Test 2") to light up in light grey with blue font and stay that way while you hover up and down the main and submenus. Loose example here: http://www.whitehouse.gov/ Currently only the one (regardless the main menu or sub-menu) that your mouse cursor is on lights up in light grey while the rest stays in different colors (dark blue or light blue depending on whether you are on that page or not). I would be very grateful if you could help me with this one as well! Thank you! Currently the codes that I have put in CSS Rules are as follows:

	.main_nav ul li {
	background: url('http://bigfattunafish.com/wp-content/uploads/2012/02/whitehouse-menu-bar.gif');
	}
	
	.main_nav li a { color: #FFFFFF; }
	
	.main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {
		background: #36648B; color: #FFFFFF
	}
	
	.navigation_wrap { border-bottom: 0 none !important; }
	.main-nav li a:hover,
	.main-nav .current-menu-ancestor .current_page_item a,
	.main-nav li.current-menu-ancestor ul a:hover { background-color: #F0F0F0 !important; color: #104E8B; }
	
	.navigation_wrap .main_nav {
	height: 33px !important; /* Changed from 31px */
	}
	
	#nav_row {
	     background: url('http://bigfattunafish.com/wp-content/uploads/2012/02/whitehouse-menu-bar.gif') !important;
	}
	

Share this post


Link to post
Share on other sites
catrina
You'd need CSS like this to change the hover: [code].main_nav li a:hover { color: #FFFFFF; }[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
yuthomas
Catrina, thanks for your input, much appreciated. Actually I think I already have the ".main_nav li a:hover" code in the existing CSS rule, if you don't mind having another look. My question was more around how I can make the color of sub-menus (or child menus) to change to the same color as the "hover over" color. Currently only the menu that your mouse cursor is over changes to the grey background + blue font. I want both the main menu and its sub-menus to change its color to the same grey background + light blue font as long as your mouse is on that menu vertical. Not sure if I'm explaining this well but for example in my site (bigfattunafish.com), if your mouse is over "Test 1" menu under "Sample Page", I want all of "Sample Page", "Test 1" and "Test 2" to show in the same light grey + blue font color. Please help!

Share this post


Link to post
Share on other sites
Rob
You need this premium plugin to get the exact same effect as the White House website: http://wpmegamenu.com/ You set the colors within that plugin. It's not free and there doesn't seem to be a free version. But the price is low at $14 US.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×