CSS menu issue in Safari and Chrome. Submenu disappears on hover unless you're really fast!

Question

When you hover over the top level links, the submenu appears as it should, but when you move the cursor down over the sub menu, it disappears sometime immediately and sometimes after the 3rd or 4th submenu link depending on how precise or fast you are! It works fine in firefox, ie7 and ie8 and validates for css and xhtml transitional. Please help I just can't see the problem. I did try adding margin-top: -1px to the sub li and/or to the sub ul to no avail.

Any ideas at all gratefully received. Oh and I should say that I am using windows vista, safari 4.0.4 and that a site user flagged up the problem and he was using safari 3 and windows xp.

Thanks

Anni

html code:

<ul id="menu">
        <li id="menu1" ><a href="http://www.theservicebusiness.com/" title="Home">Home</a></li>
<li id="menu15"  class="active"><a href="/what-we-do.html" title="What we do">What we do</a><ul class="subm"><li class=" subli">
 <a  href="/what-is-lean-service.html" title="What is Lean Service">What is Lean Service</a>

</li>
<li class=" subli">
 <a  href="/performance-metrics.html" title="Performance Metrics">Performance Metrics</a>

</li>
<li class=" subli">
 <a  href="/service-network-lean.html" title="Designing the service network around Lean concepts">Service Network</a>

</li>
<li class=" subli">
 <a  href="/global-process.html" title="Global process">Global Process</a>

</li>
<li class=" subli">
 <a  href="/organisation.html" title="Organisation">Organisation</a>

</li>
<li class="last subli">
 <a  class="last" href="/technology-and-information.html" title="Technology and Information">Technology</a>

</li>
</ul></li>
<li id="menu72" ><a href="/how-we-do-it.html" title="How we do it">How we do it</a><ul class="subm"><li class=" subli">
 <a  href="/discovery.html" title="Discovery">Discovery</a>

</li>
<li class=" subli">
 <a  href="/gain-share.html" title="Gain Share">Gain Share</a>

</li>
<li class="last subli">
 <a  class="last" href="/smart-sourcing.html" title="Smart Sourcing">Smart Sourcing</a>

</li>
</ul></li>
<li id="menu54" ><a href="/clients.html" title="Clients">Clients</a><ul class="subm"><li class=" subli">
 <a  href="/testimonials.html" title="Testimonials">Testimonials</a>

</li>
<li class=" subli">
 <a  href="/defence.html" title="Defence industry case studies">Defence</a>

</li>
<li class=" subli">
 <a  href="/hi-tech.html" title="Hi-Tech">Hi-Tech</a>

</li>
<li class=" subli">
 <a  href="/Industrial.html" title="Industrial">Industrial</a>

</li>
<li class=" subli">
 <a  href="/telecom.html" title="Telecom">Telecom</a>

</li>
<li class=" subli">
 <a  href="/computing.html" title="Computing">Computing</a>

</li>
<li class=" subli">
 <a  href="/medical.html" title="Medical Sector">Medical</a>

</li>
<li class="last subli">
 <a  class="last" href="/rail.html" title="Rail">Rail</a>

</li>
</ul></li>
<li id="menu33" ><a href="/about-us.html" title="About us">About Us</a><ul class="subm"><li class=" subli">
 <a  href="/director-bios.html" title="Director Bios">Director Bios</a>

</li>
<li class=" subli">
 <a  href="/ethical-and-social-responsibility.html" title="Ethical and social responsibility">Social Responsibility</a>

</li>
<li class="last subli">
 <a  class="last" href="/jobs.html" title="Job opportunities">Job Opportunities</a>

</li>
</ul></li>
<li id="menu73" ><a href="/global-locations.html" title="Global Locations">Global Locations</a></li>
<li id="menu6" ><a href="/contact-us.html" title="Contact Us">Contact us</a></li>
<li id="menu2"  class="last"><a href="/blog.html" title="Blog">Blog</a></li>

    </ul>

and the css:

#head, #headint, #menu ul {z-index:100}
#head h1, #headint h1 {z-index:0}
#menu1 {z-index:99}
#menu15 {z-index:98}
#menu32 {z-index:97}
#menu33 {z-index:96}
#menu48 {z-index:95}
#menu6 {z-index:94}
#menu2 {z-index:93}
#menu49 {z-index:92}
#menu, #menu ul {padding: 0;margin: 0 auto; list-style: none; width: 940px; }
#menu a {display: block;border:0; }
#menu li { float: left;width: 100px; background:transparent ; margin-bottom:0; height: 50px;} 
#menu li a {text-align: center; padding-top: 37px; font-size: 13px; font-weight: bold;color: #C3C3C3; background: url(../images/bg_nav-00-divider.png) no-repeat ; background-position: 0 bottom}
#menu li a:hover { color:#99ccff}
li#menu72 ul.subm, li#menu15 ul.subm, li#menu54 ul.subm, li#menu33 ul.subm  { position:relative; width: 196px; left: -999em; background:transparent url('../images/bg_subnav.png') no-repeat scroll 0 bottom;text-align:left }
li#menu72 ul.subm li, li#menu15 ul.subm li, li#menu54 ul.subm li, li#menu33 ul.subm li { float:none; background:transparent; display:block; width:183px;text-align:left; height: 31px;  }
li#menu72 ul.subm li a, li#menu15 ul.subm li a, li#menu54 ul.subm li a, li#menu33 ul.subm li a { padding:15px 0 0 35px; background: transparent url('../images/menbul.png') no-repeat 5px bottom; text-align:left}
li#menu72 ul.subm li.last a.last, li#menu15 ul.subm li.last a.last, li#menu54 ul.subm li.last a.last, li#menu33 ul.subm li.last a.last { padding:15px 0 25px 35px !important;  background: transparent url('../images/menbul.png') no-repeat 5px 10px; }
li#menu72 ul.subm li.last, li#menu15 ul.subm li.last, li#menu54 ul.subm li.last, li#menu33 ul.subm li.last { height:56px} 
#menu li:hover ul, #menu li.sfhover ul {left: auto ;}
li#menu1{ width:253px;}
li#menu1 a{ background: url('../images/logo.png') no-repeat 0px 0px; left: 0px; width: 253px; top: 5px; height: 50px;overflow: hidden; text-indent: -9999em; outline: none} 
#menu:hover li {background-position: 0 0;}
li#menu49 a { color:#99ccff; font-weight:bold;font-size:13px}
li#menu49 a:hover { color:#C3C3C3; }
li#menu54{ width:90px;}
li#menu33{ width:90px;}
li#menu6{ width:90px;}
li#menu2{ width:56px;}
li#menu73{ width:130px;}

Answer 1

I had trouble replicating this issue, but I think I have something for you to try.

It seems that you're using relative positioning to hide and show the sub-menus (moving from -999em to auto). Instead, I would try using:

li#menu72 ul.subm, li#menu15 ul.subm, li#menu54 ul.subm, li#menu33 ul.subm { visibility: hidden; }

#menu li:hover ul, #menu li.sfhover ul { visibility: visible; }

This way, the elements aren't moving around -- they're "stuck" in place, and just being toggled.

Give this a shot, and let us know how it works. Best of luck!

Answer 2

I found the problem... the banner is overlapping the menu. With the code you provided I couldn't replicate the problem. But after adding the banner and appropriate CSS I found it was overlapping.

After many attempts at moving the whole thing down (adding 5 <br />'s worked LOL). I found the source, change this line, margin-bottom: 0 to margin-bottom: 5px

#menu li { float: left; width: 100px; background: transparent; margin-bottom: 5px; height: 50px;}