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;
}

Answer 2

将<li>的显示设置为inline-block并删除不必要的定位和floats后，您可以使用margin: 0 auto水平居中对齐{<ul> 1}}如下图所示：

＆＃13;

.navigationMenu {
  text-align: center;
  margin-top: 10px;
}
.navigationMenu ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}
.navigationMenu li {
  display: inline-block;
}
.navigationMenu li a {
  display: inline-block;
  min-width: 140px;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-decoration: none;
  background: #B22222;
}
.navigationMenu li:hover a {
  background: #19c589;
}
.navigationMenu li:hover ul a {
  height: 40px;
  line-height: 40px;
  color: #2f3036;
  background: #f3f3f3;
}
.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;
}

＆＃13;

<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>
</div>

＆＃13;

附注：某些CSS属性（如text-align）是继承的，除非您要覆盖它，否则不必为子元素指定相同的属性。所以我通过移除它们来清理一下。

带有subMenu的导航菜单，使用位置不起作用

2 个答案: