Question

似乎我的导航栏在其他浏览器上运行正常。当您将鼠标悬停在主页或存档上时，会显示一个小菜单。除了Internet Explorer之外，它集中在大多数浏览器上。由于某种原因，它更倾向于正确。

这是相关代码：

<form onSubmit={this.props.handleSubmit}>

nav ul li:hover ul {
    display: block !important;
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

nav ul li {
list-style: none;
display: inline-block;
text-align: center;
display:flex;
justify-content:center;
-webkit-justify-content:center;
-moz-justify-content:center;
-ms-justify-content:center;
-o-justify-content:center;
}

Answer 1

这样的东西也适用于Internet Explorer，这不需要Flex Box。好的是，它也是响应性的。

* {margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a {text-decoration: none;}

.menu {display: block; border: 1px solid #999;}
.menu::after {display: block; content: " "; clear: both;}
.menu > li {position: relative; float: left; width: 20%; text-align: center;}
.menu li a {display: block; background-color: #eee; padding: 5px;}
.menu li:hover > a {background-color: #fff;}
.menu ul {position: absolute; left: -1px; right: -1px; display: none; border: 1px solid #999; border-top-color: #fff; margin-top: -1px; z-index: 1;}
.menu li:hover ul {display: block;}

<ul class="menu">
  <li>
    <a href="">Item 1</a>
    <ul>
      <li><a href="">Sub Item 1</a></li>
      <li><a href="">Sub Item 2</a></li>
      <li><a href="">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Item 2</a>
    <ul>
      <li><a href="">Sub Item 1</a></li>
      <li><a href="">Sub Item 2</a></li>
      <li><a href="">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Item 3</a>
    <ul>
      <li><a href="">Sub Item 1</a></li>
      <li><a href="">Sub Item 2</a></li>
      <li><a href="">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Item 4</a>
    <ul>
      <li><a href="">Sub Item 1</a></li>
      <li><a href="">Sub Item 2</a></li>
      <li><a href="">Sub Item 3</a></li>
    </ul>
  </li>
  <li>
    <a href="">Item 5</a>
    <ul>
      <li><a href="">Sub Item 1</a></li>
      <li><a href="">Sub Item 2</a></li>
      <li><a href="">Sub Item 3</a></li>
    </ul>
  </li>
</ul>

如果您需要更多信息，请告诉我。

我的下拉菜单集中在除IE之外的每个浏览器中，我无法弄清楚原因

1 个答案: