Question

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

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

提前谢谢！我很难过。

Answer 1

这里有各种各样的问题，但我似乎已经解决了。 IE10不能很好地与display：none和一旦我替换为visability：隐藏在我的导航栏上＆gt; li＆gt; ul，事情看起来好多了。

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

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

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

1 个答案: