steveeboy

PS: In the code example the tags are not required – I put them in to draw attention to the need for the !important in that position 🙂

Hi patmatt

I’m not exactly sure what you mean but since you say “dropdown” I’m assuming you have a menu with some sub-menu items and you want to change the colour of the dropdown with the submenu items when it first opens. If that’s what you’re after use this in your style sheet – if the colours don’t show add !important:

/*Change submenu dropdown colours*/
#access ul ul a {
    background: none repeat scroll 0 0  #F30;
    border-bottom: 1px dotted #DDDDDD;
    color: #FF0;
}

The hex code in the first line controls the colour of the dropdown background when it opens

The hex code in the second line controls the dotted line between submenu items – make it the same as the background to hide it or choose a suitable alternative colour to match your styling

The hex code in the third line controls the colour of the text in the drop down

Let me know if I’ve misunderstood what you were asking and maybe stick a link up and we can have another look.

Hope that helps a bit.

In that case just use “none” as the background colout like this:

/* Change menu item bg colour and text colour when item hovered over*/
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: none;
	color:#533e60; (use the Hex code for whatever colour you want the menu text to be e.g. #FFF for white, #000 for Black etc)
}

Does that help ?

Not sure what the specific problem is from the posts above – maybe jsut me not reading it clearly.

The previous posters advice is good – you need to add the CSS for your child theme to the file “style.css” in your child theme folder NOT the style.css associated with the default Twenty Eleven theme.

I’ve styled my menu to suite my current needs by adding the following CSS to my child theme style.css folder – see if following the structure (with your own hex codes for colour helps)(you can see the results at http://www.riotstories.co.uk to check if that’s the sort of thing you’re after)

/* Change menu item bg colour and text colour when item hovered over*/
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
	background: #000000;
	color:#533e60;
}
/*set current marker styling for menu*/
#access .current_page_item > a,
#access .current_page_ancestor > a {
	font-weight: bold;
	background:#533e60;
	background: -moz-linear-gradient(#0f0f0f, #533e60);
	background: -o-linear-gradient(#0f0f0f, #533e60);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f0f0f), to(#533e60)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#0f0f0f, #533e60);
	color:#ffffff;
}
/*Change gradient bg when menu item hovered over*/
#access li:hover > a,
#access a:focus {
	/*font-weight:bold;*/
	background: #0f0f0f; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#666666, #0f0f0f);
	background: -o-linear-gradient(#666666, #0f0f0f);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#0f0f0f)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#666666, #0f0f0f);
	color: #666666;
}