Safari 和 Chrome 中的 CSS 菜单问题。除非您真的很快，否则子菜单会在悬停时消失！答案

【问题标题】：CSS menu issue in Safari and Chrome. Submenu disappears on hover unless you're really fast!Safari 和 Chrome 中的 CSS 菜单问题。除非您真的很快，否则子菜单会在悬停时消失！
【发布时间】：2021-12-24 04:47:18
【问题描述】：

当您将鼠标悬停在顶级链接上时，子菜单会按原样显示，但是当您将光标向下移动到子菜单上时，它有时会立即消失，有时会在第三或第四个子菜单链接之后消失，具体取决于精确或快速你是！它在 Firefox、ie7 和 ie8 中运行良好，并验证 css 和 xhtml 过渡。请帮助我只是看不到问题。我确实尝试将 margin-top: -1px 添加到 sub li 和/或 sub ul 无济于事。

任何想法都非常感谢。哦，我应该说我使用的是 windows vista、safari 4.0.4 并且网站用户标记了问题并且他使用的是 safari 3 和 windows xp。

谢谢

安妮

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

【问题讨论】：

标签： css safari menu google-chrome hover

【解决方案1】：

我发现了问题...横幅与菜单重叠。使用您提供的代码，我无法复制问题。但是在添加横幅和适当的 CSS 之后，我发现它是重叠的。

经过多次尝试将整个事情向下移动（添加 5 <br /> 的工作 LOL）。找到源了，把这行，margin-bottom: 0改成margin-bottom: 5px

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

【讨论】：

你是对的！！！谢谢...我确实必须在现实生活网站中将其更改为 6px 才能使其正常工作，但非常感谢！在这样做时，它突出显示了一个 ie7 粘性悬停错误，但我通过将 #menu:hover li 交换为 #menu li:hover 来修复它

【解决方案2】：

我在复制这个问题时遇到了麻烦，但我想我有一些东西可以尝试。

您似乎正在使用相对定位来隐藏和显示子菜单（从 -999em 移动到 auto）。相反，我会尝试使用：

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

这样，元素不会四处移动——它们“卡”在原地，只是被切换。

试一试，让我们知道它是如何工作的。祝你好运！

【讨论】：

嗨，谢谢你的回复，我必须承认，当我读到它时，我认为是的，一定是它......但遗憾的是问题仍然存在......它太烦人了，我只能'看不出它的原因。还有其他想法吗？由于某种原因，长子菜单的问题最严重。较短的子菜单有时还可以。

【解决方案3】：

我遇到了同样的问题，结果发现实际上是黄色工具提示导致的。如果最终用户的光标设法悬停在工具提示上，则 safari 将结束悬停事件 b/c 它不会将工具提示视为其父 html 元素的一部分。作为一个修复，当最终用户将鼠标悬停在导航中的 a 标签上时，我实现了 jquery 来删除标题属性。

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

希望这可以帮助其他人解决这个问题，因为我花了大约一个小时才弄清楚。

【讨论】：