PDA

View Full Version : Accordion Menu Type rollover style



hairymonkeyarms
06-09-2010, 04:29 PM
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
06-09-2010, 06:50 PM
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
06-09-2010, 06:52 PM
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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

hairymonkeyarms
06-10-2010, 03:49 PM
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
06-10-2010, 09:09 PM
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
06-11-2010, 03:32 PM
Option #1 did the job! Thanks!!!