I am using a superfish menu. When you hover over a menu item the color goes from blue to white (and the background goes blue) but when you move the cursor onto the dropdown menu I want the menu item to stay white. For some reason the background stays blue but the text color changes back to the original. Here is a temporary link to the site http://sense-i.us.to/ Currently only the Systems link has sub menus with this problem. Any help would be much appreciated.
For anyone having the same problem I found a solution. Add this to your css: .sf-menu li.sfHover > a { color:#fff; } the color was being applied to a <li> which does not support the color attribute, so you have to apply it to the <a> child element of the <li> tag
I'm sorry. (not a fan ) First thing I'd suggest is swinging a giant axe at all the javascript for nothing that's bloating out the page... then I'd kick superfish to the curb -- there is also NO reason to be trying to use fancy selectors like > as yet, since browser support is still sketchy... Then I'd suggest swinging an axe at all the pointless endless wrapping DIV on that page, since at 14.6k of HTML for only 914 bytes of plaintext and maybe a half dozen actual content images it's pretty clear you've got somewhere around two to three times as much markup as is necessary! This is apparent in the menu, with the outer div for nothing, endless classes for nothing, spans for nothing -- you've got 3.5k of markup doing 2.3k's job! There is no real excuse for the HTML on that to be much more than: <ul class="menu"> <li> <a href="/" class="current">Home</a> </li><li class="hasKids"> <a href="/systems">Systems</a> <ul> <li class="hasKids"> <a href="/systems/operations-management"> Operations Management </a> <ul> <li> <a href="/systems/operations-management/product-and-service-costing"> Product and Service Costing </a> </li><li> <a href="/systems/operations-management/sales-quote-order-entry"> Sales Quote & Order Entry </a> </li><li> <a href="/systems/operations-management/order-planning-and-scheduling"> Order Planning & Scheduling </a> </li><li> <a href="/systems/operations-management/materials-management"> Materials Management </a> </li><li> <a href="/systems/operations-management/inventory-management"> Inventory Management (Stock) </a> </li><li> <a href="/systems/operations-management/sales-delivery-management"> Sales Delivery Management </a> </li><li> <a href="/systems/operations-management/job-costing"> Job Costing </a> </li><li> <a href="/systems/operations-management/labour-cost-control"> Labour Cost Control </a> </li> </ul> </li><li class="hasKids"> <a href="/systems/financial-management"> Financial Management </a> <ul> <li> <a href="/systems/financial-management/accounts-payable"> Accounts Payable </a> </li><li> <a href="/systems/financial-management/accounts-receivable"> Accounts Receivable </a> </li><li> <a href="/systems/financial-management/cashbook"> Cashbook </a> </li><li> <a href="/systems/financial-management/general-ledger"> General Ledger </a> </li><li> <a href="/systems/financial-management/accounting-management"> Accounting Management </a> </li> </ul> </li><li> <a href="/systems/performance-management"> Performance Management </a> </li> </ul> </li><li> <a href="/services">Services</a> </li><li> <a href="/why-sense-i">Why Sense-i</a> </li><li> <a href="/about-us">About Us</a> </li><li> <a href="/partners">Partners</a> </li><li> <a href="/contact-us">Contact Us</a> </li> </ul> Code (markup): All those classes you had? As George Carlin said "Not every ejaculation deserves a name" -- in the same light not every element needs a DIV or SPAN around it or a CLASS on it. Your whole page is filled with nonsense like that.... from the endless pointless horde of empty DIV for christmas only knows what, to the complete lack of anything resembling semantic markup, to the presentational images in the markup... and that's without even talking about the multiple file handshakes for no good reason thanks to javascript bloat and multiple CSS files without even having media targets, decade and a half out of date markup as specified by the tranny doctype, which is basically saying the site is in transition from 1997 to 1998 coding practices, static CSS inlined in the HTML... To be honest I'm surprised it's only throwing three validation errors, so I suspect the validator is throwing up it's hands and walking away from it. OF course, it's a joomla template so none of that is really surprising... Why do all the CMS writers insist on having their heads wedged up 1998's backside? The markup should probably look something more like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link type="application/rss+xml" rel="alternate" href="/?format=feed&type=rss" title="RSS 2.0" /> <link type="application/atom+xml" rel="alternate" href="/?format=feed&type=atom" title="Atom 1.0" /> <link type="application/opensearchdescription+xml" rel="search" href="http://sense-i.us.to/component/search/?format=opensearch" title="Search Sense-i" /> <link rel="shortcut icon" href="/templates/yoo_enterprise/favicon.ico" /> <title> Sense-i | The Business Development Company </title> </head><body> <div id="pageWrapper"> <div class="borderTop"><div></div></div> <div class="borderFirstSide"><div class="borderSecondSide"> <h1> Sense-I <span> - </span> <small>The Business Development Company</small> </h1> <form action="/" method="post" role="search" id="searchBox"> <fieldset> <input type="image" src="images/magnifier.png" alt="search" /> <input type="text" value="" name="searchword" placeholder="search..." /> <input type="hidden" name="task" value="search" /> <input type="hidden" name="option" value="com_search" /> <input type="hidden" name="Itemid" value="101" /> </fieldset> </form> <ul id="mainMenu"> <li> <a href="/" class="current">Home</a> </li><li class="hasKids"> <a href="/systems">Systems</a> <ul> <li class="hasKids"> <a href="/systems/operations-management"> Operations Management </a> <ul> <li> <a href="/systems/operations-management/product-and-service-costing"> Product and Service Costing </a> </li><li> <a href="/systems/operations-management/sales-quote-order-entry"> Sales Quote & Order Entry </a> </li><li> <a href="/systems/operations-management/order-planning-and-scheduling"> Order Planning & Scheduling </a> </li><li> <a href="/systems/operations-management/materials-management"> Materials Management </a> </li><li> <a href="/systems/operations-management/inventory-management"> Inventory Management (Stock) </a> </li><li> <a href="/systems/operations-management/sales-delivery-management"> Sales Delivery Management </a> </li><li> <a href="/systems/operations-management/job-costing"> Job Costing </a> </li><li> <a href="/systems/operations-management/labour-cost-control"> Labour Cost Control </a> </li> </ul> </li><li class="hasKids"> <a href="/systems/financial-management"> Financial Management </a> <ul> <li> <a href="/systems/financial-management/accounts-payable"> Accounts Payable </a> </li><li> <a href="/systems/financial-management/accounts-receivable"> Accounts Receivable </a> </li><li> <a href="/systems/financial-management/cashbook"> Cashbook </a> </li><li> <a href="/systems/financial-management/general-ledger"> General Ledger </a> </li><li> <a href="/systems/financial-management/accounting-management"> Accounting Management </a> </li> </ul> </li><li> <a href="/systems/performance-management"> Performance Management </a> </li> </ul> </li><li> <a href="/services">Services</a> </li><li> <a href="/why-sense-i">Why Sense-i</a> </li><li> <a href="/about-us">About Us</a> </li><li> <a href="/partners">Partners</a> </li><li> <a href="/contact-us">Contact Us</a> </li> </ul> <!-- .borderSecondSide, .borderFirstSide --></div></div> <div class="borderBottom"><div></div></div> <div class="borderTop"><div></div></div> <div class="borderFirstSide"><div class="borderSecondSide"> <div id="homeImageRotator"></div> <!-- .borderSecondSide, .borderFirstSide --></div></div> <div class="borderBottom"><div></div></div> <div class="borderTop"><div></div></div> <div class="borderFirstSide"><div class="borderSecondSide"> <div class="content"> <h2>Our Focus Is Your Success!</h2> <p> Built on over 20 years worth of experience in Industrial Engineering and Management Systems Development, the <strong><span style="color:#ffcc00;">Sense-i Enterprise Management System</span></strong> and <span style="color:#ffcc00;"><strong>Business Development Program</strong></span> is the most powerful business development solution available today for helping you develop and grow a truly successful business. </p> <img src="/images/level1/home-page.png" alt="Integrate Your Entire Business With One System" class="plate" /> <p> Our systems integrate all areas of your business, from operations through to finance, performance management, sales and marketing to work as a single team, designed to deliver real-time control and boost productivity and performance to keep your customers happy and your business competitive. </p> <!-- #content --></div> <!-- .borderSecondSide, .borderFirstSide --></div></div> <div class="borderBottom"><div></div></div> <div class="borderTop"><div></div></div> <div class="borderFirstSide"><div class="borderSecondSide"> <div id="social"> <script type='text/javascript'>var switchTo5x=true;</script><script type='text/javascript' src='http://w.sharethis.com/button/buttons.js'></script><script type='text/javascript'>stLight.options({publisher:''});</script><span class='st_facebook' displayText='Facebook'></span><span class='st_twitter' displayText='Tweet'></span><span class='st_email' displayText='Email'></span><span class='st_sharethis' displayText='ShareThis'></span> <!-- #social --></div> <!-- .borderSecondSide, .borderFirstSide --></div></div> <div class="borderBottom"><div></div></div> <div id="footer"> <ul> <li><a href="/privacy-policy">Privacy Policy</a></li> <li><a href="#">Terms of Use</a></li> <li><a href="#">Legal Disclosure</a></li> </ul> © All Rights Reserved – Sense-I Business Solutions 1998 to 2012.<br /> <a href="http://www.dynamicdesign.co.za/">Website Design</a> by Dynamic Design. <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): ... if a rotator script needs more than an ID on a empty DIV and maybe two lines to start it up, it's probably rubbish -- NOT that I'd put that type of space wasting pointless nonsense on a website in the first place... and all those 'border' DIV I have in there, can be gotten rid of if you use CSS3... I just included them to show that even with them it's HALF the markup.