悬停后下拉导航菜单项消失答案

【问题标题】：Dropdown navigation menu item disappearing after hover悬停后下拉导航菜单项消失
【发布时间】：2014-09-02 14:43:31
【问题描述】：

我正在使用引导程序来构建我的网站，主导航使用下拉菜单进行二级选择。

仅在 IE10 中（适用于其他任何地方），下拉菜单无法访问，如果您能够访问二级选项，它们会在悬停后消失。换句话说，当您将鼠标悬停在菜单项列表上时，当您将鼠标悬停在其下方的菜单项上时，上面的菜单项将消失。也许有两个问题：一个是您无法访问下拉列表（可能是填充问题？），但消失的问题，我以前从未见过。

Here's my fiddle with the problem

（**查看小提琴时，请确保调整结果面板的宽度，否则它将在移动设备上折叠）

我的 html 很简单：

<div class="container">
<div class="row">
<div class="navbar navbar-inverse" role="navigation">

<div class="navbar-collapse collapse"><!--NAVIGATION-->    

<ul class='nav navbar-nav'>
<li class='first'><a href="#">Getting Around</a>
<ul>
  <li><a href="#" tabindex="17">Find Your Ride</a></li>
  <li><a href="#" tabindex="18">Transit Overview</a></li>
  <li><a href="#" tabindex="19">Carpool/Vanpool</a></li>
  <li><a href="#" tabindex="20">Biking &amp; Walking</a></li>
</ul>
</li>
<li><a href="#">Travel Training</a>
<ul>
  <li><a href="#">Do It Yourself</a></li>
  <li><a href="#">Transit Orientation</a></li>
  <li><a href="#">Transit Ambassadors</a></li>
  <li><a href="#">Schedule a Training</a></li>
</ul>
</li>
<li><a href="#" tabindex="26">Senior Safe Driving</a></li>
<li><a href="#" tabindex="27">Programs &amp; Services</a>
<ul>
  <li><a href="#" tabindex="28">Mobility Programs &amp; Services Locator</a></li>
  <li><a href="#" tabindex="29">Mobility Programs Overview</a></li>
</ul>
</li>
</ul>


</div>

</div>
</div>
</div>

提前感谢您！我被难住了。

【问题讨论】：

你想让这个移动设备友好吗？...
是的，我正在使用引导程序的默认移动菜单。我没有在上面的 html 或小提琴中包含它。在 768px 下，菜单被折叠并通过列表菜单图标访问。我不认为这会影响这一点。
那么你不应该尝试悬停效果......你将如何在移动设备上结束？
768像素以下的菜单有不同的css，不涉及下拉菜单。
你的标题部分有以下标签吗？

标签： css twitter-bootstrap internet-explorer drop-down-menu navigation

【解决方案1】：

这里有各种各样的问题，但我似乎已经解决了。 IE10 在 display:none 上表现不佳，一旦我替换为 visability: hidden on my navbar>li>ul，情况似乎好多了。

另外，无法确认，但由于 bootstrap 为其 a 标签添加了透明的背景色，我认为我们将要透明的列表项的背景色。添加背景颜色，调整行高似乎可以解决。

原来的小提琴链接现在在 IE10 中可以正常工作。

【讨论】：