CSS: I need help with some CSS mouseover stuff...

alright, I'm helping a small high school with a css menu bar. I need to make it so that when you hover over a drop-down list, the large button (above the drop-down) stays yellow. I have attached the CSS I am using below if anyone can help me out.

Here's a quick look at what the menu looks like right now HERE[=http//dudeextrem.com/MAS/demo.htm]HERE

Here's the CSS I am using
[code1ba37e9b408]
.chromestyle{url==http://=http:///url
width: 580px;
font-weight: bold;
}

.chromestyle:after{url==http://=http:///url /liAdd margin between menu and rest of content in Firefoxli/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyleurl==http://=http:///url ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /liTHEME CHANGE HEREli/
padding: 4px 0;
margin: 0;
text-align: center; /liset value to "left", "center", or "right"li/
}

.chromestyleurl==http://=http:///url ul li{
display: inline;
}

.chromestyleurl==http://=http:///url ul li a{
color: #FFFFFF;
font:bold 13px Verdana;
padding: 6px 10px;
margin: -2px;
text-decoration: none;
border-right: 1px solid #2d2d2d;
}

.chromestyleurl==http://=http:///url ul li a:hover, .chromestyleurl==http://=http:///url li .current{url==http://=http:///url
color: #000000;
background: url(chromebg-over.gif) center center repeat-x; /liTHEME CHANGE HEREli/
}


/li ######### Style for Drop Down Menu ######### li/

.dropmenudiv{url==http://=http:///url
position:absolute;
top: 0;
border: 1px solid #b3b3b3; /liTHEME CHANGE HEREli/
border-top-width: 0px;
border-bottom-width: 0px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #e6e6e6;
width: 200px;
visibility: hidden;

}


.dropmenudivurl==http://=http:///url a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #b3b3b3; /liTHEME CHANGE HEREli/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #5d5d5d;
}

li html .dropmenudivurl==http://=http:///url a{ /liIE only hackli/
width: 100%;
}

.dropmenudivurl==http://=http:///url a:hover{ /liTHEME CHANGE HEREli/
color: #3a3a3a;
background: url(chromebgdrop1-6.gif)
}
[/code1ba37e9b408][/sizeba37e9b408]

or if you prefer, direct link to the css HERE[=http//dudeextrem.com/MAS/chrometheme/chromestyle.css]HERE. Thanks in advance guys!

Off the top of my head, without digging too deeply, I'm thinking you'd have to use some Javascript. Because when you move into the submenu, you've moved away from the top menu -- there is no mechanism within CSS alone (that I'm aware of) that will connect two disparate element events together (i.e. leave yellow on when moving to the submenu, but turn it off when you leave the submenu).

And I'm really, REALLY hoping that you don't intend to go live with page color scheme. ;)

Yeah^ You're probably gonna have to use some sort of onMouseOver attribute for the menu header and submenu that switches out the CSS styles.

Also You might want to fix that bug where the menu list reloads if you hover back over the menu header.

[quotec4c12040d5="dmorris68"]And I'm really, REALLY hoping that you don't intend to go live with page color scheme. ;)[/quotec4c12040d5]

lol, that entire page is just a demo page lol.

anyways, I'm really bummed cause I have no idea what I'm doing in javascript. oh well

[quotec4c12040d5="ajasax"]You might want to fix that bug where the menu list reloads if you hover back over the menu header.[/quotec4c12040d5]

honestly, I'm not sure how to go about doing that either...can you advise? thanks

We really should be looking at your HTML, XHTML or Javascript behavior's code, not the CSS. The CSS is only styling the function (positioning, color, padding, etc). If using standard HTML or XHTML you would have a behavior called OnMouseOut (Swap Image Restore) turned off...so that when your mouse leaves the top most navbar graphic, it stays lit (yellow) and does not go back to black. The rest of the submenu should still have the basic OnMouseOut behavior enabled. I can write it for you if I know what you're using.

[quotef63fc3147a="jwwws"]We really should be looking at your HTML, XHTML or Javascript behavior's code, not the CSS. The CSS is only styling the function (positioning, color, padding, etc). If using standard HTML or XHTML you would have a behavior called OnMouseOut (Swap Image Restore) turned off...so that when your mouse leaves the top most navbar graphic, it stays lit (yellow) and does not go back to black. The rest of the submenu should still have the basic OnMouseOut behavior enabled. I can write it for you if I know what you're using.[/quotef63fc3147a]

Oh yes, if you could help me, that'd be very appreciated! Here is a link to the javascript that this menu bar uses HERE[=http//dudeextrem.com/MAS/chromejs/chrome.js]HERE. The css is posted above, and all the text is in the HTML code (found in the page linked in the original post).

Thanks so much in advance for your help!! D

The "buttons" are not images as I assumed. They are instead text anchors with background images that display on rest and on hover. The simplest way to achieve a navbar set...go figure. lol

I rebuilt the page here to test and try out some things. No resolve. Below the original navbar I placed a fresh navbar that is more advanced with javascript but I believe achieves what you're looking for.

Like DMorris said, there is no CSS attribute for the anchor (link) tag "a" that leaves a button in a hover state while actually hovering over another area (short of a hotspot which would be disastrous in this particular application). We only have link, visited, hover and active as attributes for the "a" tag (as a link) to negotiate.

Without applying some more javascript to add some more behaviors, your desired effect cannot be achieved (with CSS that is).

Is it possible to just redo the navbar? Or do you have to utilize what you have? And was your heart set on a color change or a "pressed button" effect?

The reload of the drop down menu set can only be achieved (to my knowledge) by changing the trigger (which is hovering over the Menu Heading). Again - js to the rescue )

Are you teaching this or doing this for the school's website?

Don't make fun of my Geocities site...it's disgusting. I keep it only to upload stuff like this. oops

i'm actually just trying to help out the school, it's not a project or anything.

Well the new navbar you created pretty much achieves what I was wanting, the only difference I noticed was that the script I was using has some sort of "effect" when it displays the drop-downs, they kind of cascade downward. if you could keep that effect, that'd be awesome. Really I don't care if its javascript or css, I just needed something that will work.

I'm assuming that on the script you made, I could make it look like my original easily by just entering my images? Thanks so much for the help. 8)