CSS background colour trouble

cokecan · 25 May 2011 at 11:54

Hey Guys

I'm having a bit of trouble applying a background colour and font colour to a list item that's part of the Superfish dropdown menu using CSS.

So currently I have the background colour of the menu set to red and the font colour set to white as the default style. When you hover the mouse over a menu item, that item's background colour changes to white, the font colour changes to red and the sub menu appears. perfect.

For some reason as soon as you move your mouse into a sub menu, the previously hovered on list item's font colour changes back to the default white but the background colour stays white also (which is what I want). Setting the font colour on the list item doesnt do anything, it's always the font colour for the a tags that are inside the list items that is applied.

Can anyone help figure this out?

Thanks in advance

Code:

.sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-menu {
    width: 890px;
    margin: 0 auto;
    line-height: 1.0;
}

.sf-menu ul {
    position: absolute;
    top: -999em;
    width: 10em; /* left offset of submenus need to match (see below) */
    border: 1px solid #444;
}

.sf-menu ul li {
    width: 100%;
}

.sf-menu li:hover {
    visibility: inherit; /* fixes IE7 'sticky bug' */
}

.sf-menu li {
    float: left;
    position: relative;
}

.sf-menu a {
    display: block;
    position: relative;
    padding: .75em 1em;
    text-decoration: none;
}

.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color: #FFFFFF;
}

.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left: 0;
    top: 2.5em; /* match top ul list item height */
    z-index: 99;
}

ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}

ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
    left: 10em; /* match ul width */
    top: 0;
}

.sf-menu li, .sf-menu li li , .sf-menu li li li{
    background-color:    #CC0001;
    color: #FFFFFF;
}

.sf-menu li:hover, .sf-menu li.sfHover , .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background-color: #FFFFFF;
    color: #CC0001;
}

cokecan · 25 May 2011 at 13:00

I've knocked together a basic page here: http://www.martin-morrison.co.uk/test.html

Answer to your question, yes, I meant that the parent retains the background colour but not the font colour. This is apparent in the test page above.

Thanks for looking into it for me

cokecan · 25 May 2011 at 13:28

redeye_uk said:
edit: ignore, didnt understand requirement correctly

lol it was quite hard to describe what I'm trying to do and what was actually happening

cokecan · 25 May 2011 at 20:17

redeye_uk said:
add .sf-menu li:hover > a to the below class

Code:

.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background-color: #FFFFFF; color: #CC0001; }

Well that sorted it, many thanks

just for future reference, what does the > operator actually do here?

cokecan · 26 May 2011 at 12:01

redeye_uk said:
Only apply's the style to the immediate child - so the a in this case. The one downside to it is that IE6 & 7 don't support it....

It did seem to work in IE7 but not IE6, that may be an issue as I was trying to design my webpage to work in IE6 and upwards

cokecan · 26 May 2011 at 20:39

I was looking into the onShow and onHide functions. it would do the job nicely but I was hoping to do it using CSS so if javascript was disabled the menu would still work as expected (or close to it).

Hmm, Maybe a different menu is in order if I can't figure this bit out?

EDIT: on second thoughts, I am using the HTML5 Boilerplate project which uses the html5shiv and modernizr. Think i'll go for your solution