Mon, 2011-12-05 20:49
here is my site. http://periscope.paradoxlabs.com When rollover a link at the top the link turns red and gets a white background, when you move your mouse over one of the links in the drop down, that tab turns black and the white background goes away. is there a way that it can stay red and keep the white background even when your mouse is in the drop down? I can't think of a way to accomplish this. Any help would be great appreciated. Thank you.
here is my code.
<header id="header"> <div class="interior"> <div class="top-links"> <ul> <li class="contact-us"><a href="/contact/">Contact Us</a></li> <li class="divide"> </li> <li class="login"><a href="#">Log In</a></li> </ul> </div><!-- .top-links --> <br class="clear"> <div class="menu"> <div class="logo"> <a href="http://periscope.paradoxlabs.com"> <img alt="Periscope IQ" src="http://periscope.paradoxlabs.com/wp-content/themes/periscope-iq/img/periscope-iq-logo.png"> </a> </div><!-- .logo --> <div id="header-nav"><ul class="nav" id="menu-header-nav"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-22" id="menu-item-22"><a href="http://periscope.paradoxlabs.com/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21" id="menu-item-21"><a href="http://periscope.paradoxlabs.com/trusted-insight/">Trusted Insight</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-116" id="menu-item-116"><a href="http://periscope.paradoxlabs.com/trusted-insight/extensive-strategic-solutions/">Highly Experienced Team</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-136" id="menu-item-136"><a href="http://periscope.paradoxlabs.com/trusted-insight/commitment/">Commitment to Personalized Client Service</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20" id="menu-item-20"><a href="http://periscope.paradoxlabs.com/assured-results/">Assured Results</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107" id="menu-item-107"><a href="http://periscope.paradoxlabs.com/assured-results/smart-metrics/">Drive Your Business</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108" id="menu-item-108"><a href="http://periscope.paradoxlabs.com/assured-results/flexibility-and-customization/">Flexibility</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-131" id="menu-item-131"><a href="http://periscope.paradoxlabs.com/trusted-insight/innovation-with-results/">Successful Track Record of Innovation with Results</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-130" id="menu-item-130"><a href="http://periscope.paradoxlabs.com/trusted-insight/innovative/">Innovative Methodologies</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-132" id="menu-item-132"><a href="http://periscope.paradoxlabs.com/trusted-insight/advanced-analytical-capabilities/">Advanced Analytical Capabilities</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-133" id="menu-item-133"><a href="http://periscope.paradoxlabs.com/trusted-insight/technology/">Leading-Edge Technology Platform</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19" id="menu-item-19"><a href="http://periscope.paradoxlabs.com/solutions/">Solutions</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-post_type menu-item-object-slider_image menu-item-135" id="menu-item-135"><a href="http://periscope.paradoxlabs.com/slider_image/voice-of-the-customer/">Voice of the customer</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-slider_image menu-item-134" id="menu-item-134"><a href="http://periscope.paradoxlabs.com/slider_image/voice-of-the-employee/">Voice of the employee</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18" id="menu-item-18"><a href="http://periscope.paradoxlabs.com/about-us/">About Us</a></li> </ul></div> </div><!-- .menu --> </div><!-- .interior --> </header>
header, #content, footer {margin:0 auto;} header {height:136px; width:100%; background:url("../img/header-bg.png") repeat-x left bottom;} header .interior {width:972px; margin:0 auto;} header .top-links {float:right; margin:16px 28px 0;} header .top-links ul {} header .top-links ul li {text-transform:uppercase; float:left;} header .top-links ul li.contact-us {background:url("../img/contact-us-icon.png") no-repeat left center; padding:0 0 0 22px;} header .top-links ul li.login {background:url("../img/login-icon.png") no-repeat left center; padding:0 0 0 16px;} header .top-links ul li.divide {background:url("../img/top-links-divide.png") no-repeat center center; padding:0 8px;} header .top-links ul li a {color:#fff; font-weight:bold;} #graphic { width:958px; height:190px; margin:0 auto; margin-bottom:44px; } header .menu {margin:28px 0 0;} header .menu .logo {float:left; margin-left: 25px;} header .menu #header-nav {float:right; margin:24px 27px 0;} header .menu #header-nav ul {} header .menu #header-nav ul li {float:left;} header .menu #header-nav ul li a {color:#000; text-transform:uppercase; font-weight:bold;margin-top: -42px;padding: 38px 24px 32px 23px;} header .menu #header-nav ul li:last-child {background:none;padding:0;} header .menu #header-nav ul li ul li a {padding:10px 20px;margin:0 0 0 10px;border-bottom:1px solid #000;width:257px;text-transform:none;} header .menu #header-nav ul li ul li:last-child a {border:none;} header .menu #header-nav ul li a:hover {color:#D12128;background:#fff;} header .menu #header-nav ul li ul li a:hover {background-color:transparent;} header .menu #header-nav ul li.current-menu-item a {color:#d12128;} .header .menu #header-nav ul li ul.sub-menu li {background:none;} #header-nav ul { padding: 0; margin: 0; list-style: none; } .sub-menu a { display: block; width: 10em; } #header-nav li ul.sub-menu li { float: left; width: 10em; background:url("../img/dropdown_li_bg.png"); width:330px; padding:0; margin-left:-4px; } header .menu #header-nav ul li ul.sub-menu li:last-child { background:url("../img/dropdown_li_bg_bottom.png"); padding:0; height:55px; } #header-nav ul li ul { position: absolute; left: -999em; display:block; width:330px; top:126px; } #header-nav li:hover ul { left: auto; z-index:6; }
