Accordion Menu Type rollover style

[hairymonkeyarms]

Hi- I'm using the dynamicdrive vertical accordion menu and I was wondering if there is any way to change the color of the menu headers on rollover (using the class "mypets" in your example 1. I don't want to highlight it with a background color- i'd rather have the type itself change color on rollover. Is this possible to do ONLY in the "mypets" class?

thanks

[europe451]

Just a quick glance, but -

instead of:

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

make it:

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: #f51919; /*or whatever color you want it to be*/
}

but if you want to change the headerbar (which is probably what you meant)

.urbangreymenu .headerbar a:hover{
color: #f51919; /*or whatever color you want it to be*/
}

[djr33]

If you need more help than this:

Please post a link to the page on your site that contains the problematic script so we can check it out.

Also:
Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[hairymonkeyarms]

Nope, didn't work. Here's a link to the page: http://www.joewigdahl.com/2010site/
The categories "Portfolios" and "Tearsheets" are in the headerclass "menuheader" and the submenu items in the contentclass are called "menuitem".

I'd like for "Portfolios" and "Tearsheets" to highlight to #DC3737 on rollover like the links in the submenu. Here's my css:

@charset "UTF-8";
/* CSS Document */

#id {
height: 49px;
width: 290px;
position: absolute;
left: 0px;
top: 0px;
}
#backgroundimage {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: -1;
height: 100%;
}
#gallerywindow {
position: relative;
margin-top: 7%;
margin-right: auto;
margin-left: auto;
width: 770px;

}
#navigation {
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
line-height: 24px;
font-weight: normal;
text-transform: uppercase;
color: #000;
height: 300px;
width: 140px;
position: absolute;
left: 15px;
top: 55px;
padding-left: 10px;
padding-top: 5px;
z-index:1
}
a:link {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #dc3737;
}

#navigation .menuheader {
cursor: pointer;
cursor: hand;
color: #000;

}

#navigation .menuheader a:hover{
color:#dc3737
}

[europe451]

The problem is that in the tut the headerbar is a link, which is how you have it defined in the CSS

#navigation .menuheader a:hover{
color:#dc3737
}

You can do 1 of 2 things:

#navigation .menuheader:hover{
color:#dc3737
}

or

<div class="menuheader"><a>Portfolios</a></div>

[hairymonkeyarms]

Option #1 did the job! Thanks!!!