CSS hover attribute

[rhaya]

First of all, this is a great plugin. I have customized the CSS to match my site, but there is one attribute that I am having trouble adjusting. The hover of the top level nav… I can change the background color in this line of the stylesheet:

#suckerfishnav li:hover, #suckerfishnav li.sfhover {
color:#ffffff;
background:#c79728;
}

But the text color seems to be overridden by this style:

#suckerfishnav a {
display:block;
color:#242424;
text-decoration:none;
padding:4px 12px 5px 12px;
}

How can I change the stylesheet so that the hover text color is white? I tried adding this: #suckerfishnav li a:hover {color:#ffffff; background:#c79728;}
and while the hover text was white, it messed up other styles.

Thanks for you help. Sorry I can’t link to the site, it’s in development and not to be "released" to the public yet. If you want to email me, I can send you the link in an email.

Thanks,
Rhaya

[imported_Ryan]

Hi,
The reason the text isn’t changing colour is because it is a link and hence is controlled by the hover of the link. The following will allow you to style the hovered link:
[code:e2evj6ar]#suckerfishnav a:hover {color:#FFFFFF}[/code:e2evj6ar]

[rhaya]

Hi Ryan,
Unfortunately adding that line of code to my stylesheet didn’t change the hover attribute… Here are all the styles I have for the suckerfish menu… maybe something will jump out at you as to what is preventing the change.

/*

---

SUCKERFISH MENU STYLES

---

*/

#suckerfishnav {
font-family: "Century Gothic", "Futura", "Avante Garde", sans-serif;
color:#ffffff;
font-size:12px;
letter-spacing:1px;
width:537px;
height:30px;
}

#suckerfishnav, #suckerfishnav ul {
float:left;
list-style:none;
margin:0;
width:100%;
height:30px;
}

#suckerfishnav a {
display:block;
color:#242424;
text-decoration:none;
padding:4px 12px 5px 12px;
}

#suckerfishnav li {float:left;padding:0;}

#suckerfishnav ul {
position:absolute;
left:-999em;
height:auto;
width:151px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
}

#suckerfishnav li li {
width:149px;
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#ede1c5;
border-bottom:1px solid #b69545;
border-left:1px solid #b69545;
border-right:1px solid #b69545;
}

#suckerfishnav li ul {
border-top:1px solid #b69545;
}

#suckerfishnav li li a {
padding:4px 10px;
width:130px;
font-size:11px;
}

#suckerfishnav li ul ul {margin:-21px 0 0 150px;}

#suckerfishnav li li:hover {background:#e2d4b5;}

#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#414040;}

#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#414040;}

#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#414040;}

#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}

#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}

#suckerfishnav li:hover, #suckerfishnav li.sfhover {color:#ffffff; background:#c79728;}

#suckerfishnav a:hover {color:#FFFFFF}

[imported_Ryan]

Sorry for the delay in replying.

This should work better:
[code:13evupc5]#suckerfishnav li a:hover {color:#FFFFFF}
#suckerfishnav li:hover li a:hover,#suckerfishnav li.sfhover li a:hover {color:#FFFFFF}[/code:13evupc5]

The second line restyles the dropdown text to be white as well.

[rhaya]

Thanks Ryan. I actually don’t need the dropdown color to be white, so I just needed the first line of code. It is almost working exactly like I wanted, but one other thing I was hoping is that the text color stays white when you hover over the dropdown text. Right now, the bg color stays in the hover state, but the text changes back to default.

One other thing, in IE6, I think I need to add a display:block somewhere to the style sheet, because only the text is a link (as opposed to the whole button). Any thoughts?

If this goes above and beyond what you answer on the forum, just let me know. Also, I think I can give you a link to the site so you can see what I mean. It’s still in the dev stage, but only the content is missing at this point. To keep this post from showing up in the WordPress dashboard, I am going to write it out below.

photosbyjennifer [dot] com/blog/

Thanks for all your help.

[imported_Ryan]

Wow, nice menu! It looks slick!

I haven’t tested it, but I think this should do the trick:
[code:37pp42la]#suckerfishnav li:hover a,#suckerfishnav li.sfhover a {color:#FFFFFF}[/code:37pp42la]

[rhaya]

Thanks Ryan, that did the trick! I really appreciate your help. I’ll make sure to give your plugin credit once I post about the new site on my own site.

[imported_Ryan]

Thanks ” title=”Smiley” />

[Author]

Posts