4 replies [Last post]
KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 13 years 48 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Hi All,

Im having trouble understanding how to access a parent element.

I have a main nav button, which has a dropdown subnav. How can I get the "over" state of the main button to remain while rolling over the subnav elements?

div#listMenu {width:760px; height:23px; background-image:url(../images/bg_nav_tile.jpg); background-repeat:repeat-x; background-color:#ffffff; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}

******** MAIN MENU ************
div#listMenu li.web a{width:136px; display:block; text-decoration:none; padding:4px 0px 0px 0px; height:19px; text-align:center; color:#ffffff; font-size:11px; font-weight:bold; border-right:1px solid #ffffff;}

div#listMenu li.web a:hover{ background-image:url(../images/bg_nav_tile_over.jpg); background-repeat:repeat-x; width:136px; display:block; height:19px; padding:4px 0px 0px 0px; color:#999999; text-align:center; font-size:11px; font-weight:bold; border-right:1px solid #ffffff;}

div#listMenu li.webMarker a{ text-decoration:none; background-image:url(../images/bg_nav_tile_over.jpg); background-repeat:repeat-x; width:136px; display:block; height:19px; padding:4px 0px 0px 0px; color:#999999; text-align:center; font-size:11px; font-weight:bold; border-right:1px solid #ffffff;}

******** SUB MENU ************
div#listMenu ul li ul.webButton{ width:600px; position:absolute; top:23px; left:5px; display:none; text-align:center; list-style-type:none;}

div#listMenu ul li ul li.services a{ background-image:none; position:relative; width:65px; height:14px; margin:7px 0px 0px 0px; display:block; text-align:center; color:#999999; border-right:1px solid #999999;}

div#listMenu ul li ul li.services a:hover{ background-image:none; display:block; height:14px; width:65px; margin:7px 0px 0px 0px; text-align:center; color:#000000; border-right:1px solid #999999;}

HTML:


Thanks!

Keith

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 34 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Try doing

Try doing this:

div#listMenu li.web a:hover, div#listMenu li.web a:active

I basically added an a:active, I dont know if it will work, but please let me know.

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 13 years 48 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Still no luck. I believe

Still no luck.
I believe the :active is the actual "click" action, which would not help me.

Seems somehow when the user is rolling over the subnav I have to tell the main button .web to remain in its :hover state. Maybe use an expression? which Im not to good with. Anyone know if Im on the right track?

Thanks for the post vinhboy.

Keith

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 34 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

Ok here is a bit of code I

Ok here is a bit of code I got from cssplay

.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

What I noticed here is that the a:hover is kept consistently to the next level. So my suggestion to you is, change your submenu to reflect the :hover state of the main menu. This makes sense. Hahaha Smile

KSquared
Offline
Enthusiast
Raleigh, NC
Last seen: 13 years 48 weeks ago
Raleigh, NC
Joined: 2005-10-28
Posts: 86
Points: 0

Thanks!! A bit of tweaking

Thanks!! A bit of tweaking but for the most part thats what I needed. Heres what I ended up with to make it work.

div#listMenu ul li:hover{ background-image:url(../images/bg_nav_tile_over.jpg); background-repeat:repeat-x; color:#999999; }

div#listMenu ul li:hover ul li:hover{ background-image:none;}

Thanks again!

Keith