CSS background colour trouble

[cokecan]

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

.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;
}

 

[gord]

When you say previously hovered on, you mean the parent menu item for the sub menu you are currently in retains the background colour but the font colour changes back to white.

That's the default for a superfish menu IIRC. But I'm sure you can fix it. Do you have a working example I can access, it would be much faster to use firebug on it.

 

[cokecan]

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

 

[redeye_uk]

edit: ignore, didnt understand requirement correctly

 

[cokecan]

edit: ignore, didnt understand requirement correctly

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

 

[redeye_uk]

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

.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]

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

.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?

 

[redeye_uk]

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....

 

[cokecan]

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

 

[redeye_uk]

Then you will need to do the styling effect programatically. Something like this should work...

.item-on {
  color: red;
}

Then use a jquery selector to find the item.

$(".sf-menu li.sfHover").hover(function(){
  //mouse over
  $(this).find("> a").addClass("myClass");
},
function() {
  //mouse out
  $(this).find("> a").removeClass("myClass");
});

I would think the superfish plug-in would provide a mechanism for doing this judging by some of the class names it is using. Let me check the documentation as there is probably an easier solution

 

[redeye_uk]

Looks like you can make use of the onShow and onHide options.

$(document).ready(function() { 
        $('ul.sf-menu').superfish({ 
            delay:       1000,                            // one second delay on mouseout 
            animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
            speed:       'fast',                          // faster animation speed 
            autoArrows:  false,                           // disable generation of arrow mark-up 
            dropShadows: false,                            // disable drop shadows 
            [B]onShow: function(){
                $(".sf-menu li.sfHover > a").addClass("myClass");
            },
            onHide: function(){
                $(".sf-menu li:not([class~='sfHover']) > a").removeClass("myClass");
            }[/B]
        }); 
    });

 

[cokecan]

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