css - 悬停后下拉导航菜单项消失

Question

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

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

Here's my fiddle with the problem

(**查看 fiddle 时，请确保调整结果面板的宽​​度，否则移动设备会折叠)

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

提前致谢!我很难过。

Answer 1

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

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

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