Question

body {
  font-family: arial;
}
nav {
  font-size: 85%;
  line-height: 2;
}
nav ul {
  background-color: #222;
  list-style: none outside none;
  margin: 0 auto;
  padding: 0;
}
nav ul li {
  display: inline;
}
nav a {
  background-color: #222;
  font-size: 120%;
  text-decoration: none;
}
nav a:link,
nav a:visited {
  color: #fff;
  display: inline-block;
  padding: 2px 3% 2px 0;
}
nav a:hover,
nav a:active,
nav .active a:link,
nav .active a:visited {
  color: #3d99ed;
  text-shadow: none;
}
nav a.selected {
  color: #3d99ed;
}
nav ul li div {
  background-color: #444;
  left: 0;
  position: absolute;
  width: 100%;
}
nav ul li ul {
  background-color: #444;
  display: block;
  left: 0;
  max-width: 1170px;
  vertical-align: middle;
  width: 89%;
}
nav ul li ul li {
  background-color: #444;
  color: #fff;
  height: 12px;
  margin: 0;
  max-width: 1180px;
  text-align: left;
  width: 90%;
}
nav ul li ul li a {
  background-color: #444;
  font-size: 120%;
}
@media only screen and (min-width: 150px) and (max-width: 600px) {
  nav {
    height: 160px;
  }
  nav a:hover,
  nav a:active,
  nav .active a:link,
  nav .active a:visited {
    background-color: #3d99ed;
    color: #fff;
    text-shadow: none;
  }
  nav ul {
    padding-left: 0;
  }
  nav ul li {
    font-size: 140%;
    text-align: center;
    width: 100%;
  }
  nav ul li a {
    background-color: #444;
    margin: 3px;
  }
  nav a:link,
  nav a:visited {
    display: block;
  }
}

<nav>
  <ul>
    <li> <a href="/">Item1</a>

    </li>
    <li> <a href="#">Item2</a>

      <div>
        <ul>
          <li><a href="#">SubItem2A</a>

          </li>
          <li><a href="#">SubItem2B</a>

          </li>
        </ul>
      </div>
    </li>
    <li> <a href="#">Item3</a>

    </li>
    <li> <a href="#">Item4</a>

    </li>
  </ul>
</nav>

<h1>This Title is not fully visible</h1>

<nav>
  <ul>
    <li>
      <a href="/">Item1</a>
    </li>
    <li>
      <a href="#">Item2</a>
    </li>
    <li>
      <a href="#">Item3</a>
    </li>
    <li>
      <a href="#">Item4</a>
    </li>
  </ul>
</nav>

<h1>This Title is visible</h1>

我正在尝试实现包含子菜单的导航。从语义的角度来看，我认为最好将子菜单包含在它所属的顶级菜单项中。

我试图只发布它的相关部分

问题是，为了在主导航下方显示子菜单，我必须设置位置absolute（参见nav ul li div规则）。这会导致导航与下面的内容重叠。我该如何防止这种情况？

我还提供了更完整的代码：http://jsfiddle.net/xxs7fjt9/1/ 它还包含一个响应部分，当然也会发生重叠。

Answer 1

编辑：

如果你不希望它依赖于悬停（=总是显示子菜单），并让其他元素尊重你的子菜单，你必须让'nav'和'h1'向左浮动并给它们一个宽度100％要测试这个，你可以删除子菜单，你会发现标题总是与菜单有相同的偏移量。

更新了小提琴：http://jsfiddle.net/s08j9od8/2/

h1 {
    float: left;
    width:100%;
}
nav {
    font-size: 85%;
    line-height: 2;
    float: left;
    width: 100%;
}

旧答案：

子菜单重叠较低内容是正常的，这通常是可接受的语义。

如果您不想这样，那么您最好的选择是使子菜单相对定位。然后在悬停父菜单时显示子菜单，这将导致其下方的标题与子菜单相同的距离。

我用一个工作示例做了一个小提琴，并且还解决了响应版本（标题与移动菜单重叠）

http://jsfiddle.net/s08j9od8/

代码：

nav ul li div {
    display:none;
    background-color: #444;
    left: 0;
    position: relative;
    width: 100%;
 }

悬停：

    nav ul li:hover div {
    display:block;
    float: left;
}

此外，我必须在您的媒体查询中删除它，以解决小屏幕上的重叠标题：

nav {
    height: 160px;
}

Answer 2

嗯，这是绝对定位的代价，你可能需要通过在你的h1上应用padding-top来相应地调整你的内容，让我们说

h1 { padding-top:20px }

希望这有帮助

HTML / CSS：带水平子菜单的导航，下面没有重叠元素

2 个答案: