Проблема с меню CSS в Safari и Chrome. Подменю исчезает при наведении, если вы не очень быстро!

Question

Когда вы наводите курсор на ссылки верхнего уровня, подменю отображается так, как должно, но когда вы перемещаете курсор вниз по подменю, оно исчезает когда-то сразу, а иногда после 3-й или 4-й ссылки подменю в зависимости от того, насколько точным или быстрым ты! Он отлично работает в Firefox, ie7 и ie8 и проверяет переходы css и xhtml. Пожалуйста, помогите, я просто не вижу проблемы. Я попытался добавить margin-top: -1px в sub li и / или sub sub безрезультатно.

Любые идеи вообще с благодарностью принимаются. Да, и я должен сказать, что я использую Windows Vista, Safari 4.0.4 и что пользователь сайта отметил проблему, и он использовал Safari 3 и Windows XP.

Спасибо

Anni

HTML-код:

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

и 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

Я обнаружил проблему ... баннер перекрывает меню. С предоставленным вами кодом я не смог воспроизвести проблему. Но после добавления баннера и соответствующего CSS я обнаружил, что он перекрывается.

После многих попыток переместить все это вниз (добавив 5 <br /> сработало LOL) Я нашел источник, измените эту строку, margin-bottom: 0 на margin-bottom: 5px

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

Answer 2

У меня была такая же проблема, и оказалось, что причиной были именно желтые подсказки. Если курсор конечного пользователя удастся навести на всплывающую подсказку, safari завершит событие наведения курсора, так как он не видит всплывающие подсказки как часть своего родительского HTML-элемента. В качестве исправления я реализовал jquery для удаления атрибутов заголовка из тегов a в навигации, когда конечный пользователь наводит на них курсор.

$(document).ready(function() {
    var originalTitle = '';
    $("div#menu ul li a").hover(
     function() {
      originalTitle = $(this).attr("title");
      $(this).attr("title","");
     },
     function() {
      $(this).attr("title",originalTitle);
     }
    );               
});

Надеюсь, что это поможет всем остальным в этой проблеме, так как мне потребовалось около часа, чтобы разобраться с ней.

Answer 3

У меня были проблемы с тиражированием этой проблемы, но я думаю, у меня есть кое-что для вас попробовать.

Похоже, что вы используете относительное расположение, чтобы скрыть и показать подменю (переход от -999em к авто). Вместо этого я бы попытался использовать:

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

Таким образом, элементы не перемещаются - они «застряли» на месте и просто переключаются.

Сделайте это, и дайте нам знать, как это работает. Желаем удачи!