You bet :-)

Chris

DOH! I feel like such an idiot. Thank you very much, Chris. My apologies to have bothered you with something I should have seen earlier. Moral of the story: no more website coding in the wee hours of the morning :-)

Thanks very much--that fixed it right up, of course.

Hi there,

There's an error in your markup...

#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff #important;
}

...should be this...

#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff !important;
}

You had #important instead of !important

Let me know if that works better.

Best,

Chris

Good evening,

I've customized the menus on my B+M based site to make the text a little larger, adjust the colors, and change around the font face (I'm using separate Google Fonts for normal text versus headers). The site is here: http://dantrimble.com.

The colors are almost entirely what I'm looking for now. The dropdown for menu items on the nav bar that have submenus now uses the same color as the triangle area that opens the sidebar on the page. For my menus, I currently have only one that has submenu items--Topics. So it uses that tealish color as the background, and white text for the individual menu items. As the hover changes from item to item, I'm using a dark gray background and white text to highlight the currently hovered menu item. And for the current page only, a light gray background color.

All perfect, except for ONE thing... Notice that on my dropdown under Topics, the highlight works as I move from one item to the next. White text, dark gray highlight color. I want that SAME effect when I hover over the menu items on the main level -- Home, About, Topics, Contact, etc. Currently, my CSS is giving me the background color in that scenario, but no matter what I do, it won't make the text color white when hovering. Just leaves it as the default text color for those items (which is the same dark gray I'm using for the highlight color).

My code is below. Note that I'm doing all customizations in a child theme, including the CSS--it's in the child's style.css. I have, however, tried doing these CSS tweaks in the theme options CSS editor within wp-admin. I have the same problem either way.

What am I doing wrong with this CSS--how do I get the text color to switch to white during a hover event for the 1st/top menu level?

#navigation {width: 620px; float: left;}
#dropmenu {list-style:none; position:relative; width:100%; z-index: 400;}

#dropmenu li {list-style:none; position:relative; float: left; line-height: 20px; width: 160x; margin-left: 30px;}

#dropmenu li a {
	display: block;
	line-height: 22.5px !important;
	font-size: 16px !important;
	text-transform: uppercase;
	color: #585858 !important;
	font-weight: 400 !important;
}
#dropmenu li a:hover {
	text-decoration: none;
	background: rgb(88,88,88);
	color: #ffffff #important;
}

#dropmenu li ul {
	list-style:none;
	display:none;
	position:absolute;
	width:220px; z-index:300; top:20px; left: 0;
	background: #748494 !important;
	padding: 5px 0;
	/* border-style: dotted; border-width:1px; border-color: lightGrey;
	-moz-border-radius: 6px; */
}
#dropmenu li ul li {position:relative; margin: 0; width:220px;}
#dropmenu li ul li a {line-height: 30px; padding: 0 15px; color: #ffffff !important;}
#dropmenu li ul li ul {}

#dropmenu li:hover ul ul,
#dropmenu li:hover ul ul ul,
#dropmenu li:hover ul ul ul ul {display:none;}
#dropmenu li:hover ul,
#dropmenu li li:hover ul,
#dropmenu li li li:hover ul,
#dropmenu li li li li:hover ul {display:block;}
#dropmenu li.current-menu-item > a,
#dropmenu li.current-menu-ancestor > a {background: lightGrey !important; -moz-border-radius: 6px;}

#plusSign {position: absolute; width: 31px; height: 30px; right: 30px; top: 30px; z-index: 1000; background: url(images/plus.png) no-repeat left top; cursor: pointer;}
#plusSign.closeMe {background-position: bottom left}