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

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/
当然，它也包含一个响应部分，其中也会发生重叠。

最佳答案

编辑：

如果您不希望它依赖于悬停（=始终显示子菜单），并且让其他元素尊重您的子菜单，则必须使“ 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;
}