Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop Down Menu styling

Status
Not open for further replies.

pumpkin05

Programmer
Aug 4, 2011
1
GB
Hello all, I have created a CSS drop-down menu, all working nicely except for one thing, the rollover styling disappears once you go from the nav to the sub nav in the dropdown.
For example: When you have the primary About menu active and then go to the subnav drop down, the About text will go from the rollover blue and back to the active grey. Hope that this makes sense.
To get a feel for what is happening go to CSS Code:
#main-menu {z-index:10; position:relative;}
#main-menu ul {margin:0; padding:0; float:left;}
#main-menu ul li {list-style:none;float:left;height:37px;position:relative; padding:0; margin:0;}
#main-menu ul li a { display:block;padding:0 12px; margin:0;line-height:37px;color:#FFF;text-decoration:none;font-size:12px;text-transform:uppercase;}
#main-menu ul li.active {}
#main-menu ul li.active a {color:#999;/*background:#7a7b7e;*/}
#main-menu ul li:hover {background:#3ea8d4;}
#main-menu ul li a:hover{color:#92d2ed;text-decoration:none;background:#3ea8d4;}
#main-menu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:5px 0px 10px 0px;background:#3ea8d4;}
#main-menu ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#main-menu ul li ul li:hover ul {left:180px; top:0}
#main-menu ul li a.last ul li:hover ul {left:0px; top:0px}
#main-menu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
#main-menu ul li:hover ul li { background:none;}
#main-menu ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a, #nav ul li.active ul li.active ul li a{margin:0; padding:4px 13px;line-height:20px; background:#3ea8d4; color:#FFF; font-size:13px;line-height:15px; font-weight:normal; text-transform:none; }
#main-menu ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a, #nav ul li.active ul li.active ul li a:hover, #nav ul li.active ul li.active ul li.active a {color:#92d2ed;}
#main-menu ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
 
so if i click on on a link and the "about" link now looks grey is not what you want?

if thats the case then you need to specify a a.visited to style links that have been used.

Darryn Cooke
| Marketing and Creative Services
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top