Question

我在线找到了一个响应式网站的教程，但是我想将它提供的菜单更改为特定项目的子菜单下拉菜单。当我尝试添加一个时，它会正确显示子菜单项，但不能正确定位它们。

以下是代码：

.mainheader nav {
  background-color: #666;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.mainheader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainheader nav ul ul {
  position: absolute;
  visibility: hidden;
}
.mainheader nav ul li:hover ul {
  background-color: #666;
  visibility: visible;
}
.mainheader nav ul li {
  float: left;
  display: inline;
}
.mainheader nav a:link,
.mainheader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
  height: 20px;
}
.mainheader nav a:hover,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}
.mainheader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

<header class="mainheader">
  <nav>
    <ul>
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Test</a>
          </li>
          <li><a href="#">Test</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

这是JSFiddle。

我如何获得它，以便两个测试子菜单项位于服务下方，以服务为中心，彼此之下？

Answer 1

添加此项以使<li>元素垂直堆叠：

.mainheader nav ul ul li {
  clear: both;
}

此外，默认情况下，<ul>将缩进。将其添加到.mainheader nav ul ul以修复对齐：

padding: 0;
list-style-type: none;

请参阅：https://jsfiddle.net/wynLsuwa/3/。

Answer 2

添加以下两条规则：

.mainheader nav ul li ul {
  padding: 0;
  min-width: 110px;
}
.mainheader nav ul li ul li {
  float: none;
  display: block;
  text-align: left;
}

小提琴：https://jsfiddle.net/c19hku1o/1/

Answer 3

我认为以下是你想要实现的目标？

注意：

.mainheader nav ul ul {
  left: 0;
  width: 100%;
}

和

.mainheader nav ul li {
  position: relative;
}

.mainheader nav {
  background-color: #666;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.mainheader nav ul {
  list-style: none;
  margin: 0 auto;
}
.mainheader nav ul ul {
  position: absolute;
  visibility: hidden;
  left: 0;
  width: 100%;
}
.mainheader nav ul li:hover ul {
  background-color: #666;
  visibility: visible;
}
.mainheader nav ul li {
  float: left;
  display: inline;
  position: relative;
}
.mainheader nav a:link,
.mainheader nav a:visited {
  color: #FFF;
  display: inline-block;
  padding: 10px 25px;
  height: 20px;
}
.mainheader nav a:hover,
.mainheader nav a:active,
.mainheader nav .active a:link,
.mainheader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
}
.mainheader nav ul li a {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

<header class="mainheader">
  <nav>
    <ul>
      <li class="active"><a href="#">Home</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li>
        <a href="#">Services</a>
        <ul>
          <li><a href="#">Test</a>
          </li>
          <li><a href="#">Test</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </nav>
</header>

CSS子菜单项 - 未正确定位

3 个答案: