我的导航栏在其他浏览器上似乎工作正常。当您将鼠标悬停在主页或存档上时，应该会出现一个小菜单。它以除 Internet Explorer 之外的大多数浏览器为中心。由于某种原因，它更向右推。
这是相关代码:
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;
}
<html>
<head></head>
<body>
<nav class="navbar-fixed-top">
<ul class="row">
<li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a href="index.html">Home</a>
<ul class="small_sections">
<li> <a id="welcome" href="#welcomeSection"> <h5>top</h5> </a> </li>
<li> <a id="classes" href="#classesSection"> <h5>classes</h5> </a> </li>
<li> <a id="trainning" href="#trainningSection"> <h5>trainning</h5> </a> </li>
<li> <a id="comitee" href="#comiteeSection"> <h5>comitee</h5> </a> </li>
<li> <a id="get_involved" href="#get_involvedSection"> <h5>get involved</h5> </a> </li>
</ul> </li>
<li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a>Archive</a>
<ul>
<li> <a href="our_society.html">our society</a> </li>
<li> <a href="makes_breaks.html">Makes n breaks</a> </li>
</ul> </li>
<li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a href="#">Events</a> </li>
<li class="hidden-md hidden-lg row">
<div class="col-xs-4 col-sm-4"> <a href="#">menu</a>
</div>
<div class="col-xs-1 col-sm-1">
<span class="glyphicon glyphicon-align-justify" id="navigate" aria-hidden="true">
</span>
</div></li>
</ul> </nav>
</body>
</html>
最佳答案
像这样的东西也可以在 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>如果您需要更多信息，请告诉我。
关于html - 我的下拉菜单在除 IE 之外的每个浏览器中都居中，我不知道为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40097658/