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;}
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;}