html - 使用位置居中的子菜单的导航菜单不起作用

Question

我做了网站顶部的菜单导航。导航菜单也有它的子链接。我尝试过很多位置样式，例如 absolute、inline-block、inline、text-align:center。他们仍然没有工作。以下代码如下:

HTML

<div class="navigationMenu">
<ul id="menu">
    <li><a href="#"> LINK 1 </a></li>
    <li>
        <a href="#"> LINK 2 </a>
        <ul class="hidden">
            <li><a href="#"> SUB LINK 1 </a></li>
            <li><a href="#"> SUB LINK 2 </a></li>
        </ul>
    </li>
    <li>
        <a href="#"> LINK 3 </a>
        <ul class="hidden">
            <li><a href="#"> SUB LINK 1 </a></li>
            <li><a href="#"> SUB LINK 2 </a></li>
        </ul>
    </li>
    <li><a href="#"> LINK 4 </a></li>
</ul>

CSS

.navigationMenu {clear:both;text-align:center;margin-top:10px;}
.navigationMenu ul {list-style-type:none;margin:0;padding:0;position: absolute;text-align: center;}
.navigationMenu li {display:inline;float:left;margin-right: 1px;text-align: center;}
.navigationMenu li a {min-width:140px;height: 50px;text-align: center;line-height: 50px;color: #fff;background:#B22222;text-decoration: none;display: inline-block;}
.navigationMenu li:hover a {background: #19c589;}
.navigationMenu li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}
.navigationMenu li:hover ul a:hover {background: #19c589;color: #fff;}
.navigationMenu li ul {display: none;position: absolute;}
.navigationMenu li ul li {display: block;float: none;}
.navigationMenu li ul li a {width: auto;min-width: 100px;padding: 0 20px;}
.navigationMenu ul li a:hover + .hidden, .hidden:hover {display: block;}

这里是 JSFIDDLE.问题是我无法将菜单置于 .navigationMenu 的中心。有什么想法吗？

Answer 1

您有一个选择:

.navigationMenu ul {
  /* position: absolute; */
  margin: 0 auto;
  display: table;
}