HTML/CSS : navigation with horizontal submenu without overlapping element below

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>

我正在尝试实现包含子菜单的导航。从语义的 Angular 来看，我认为最好将子菜单与其所属的顶级菜单项包装起来。

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

问题是，为了在主导航下方显示子菜单，我必须设置位置 absolute(参见 nav ul li div 规则)。这会导致导航与下面的内容重叠。我怎样才能避免这种情况？

我还用更完整的代码做了一个 fiddle :http://jsfiddle.net/xxs7fjt9/1/ 它还包含一个响应部分，当然也会出现重叠。

Answer 1

编辑:

如果你不希望它依赖悬停(=总是显示子菜单)，并让其他元素尊重你的子菜单，你必须让'nav'和'h1'向左浮动并给它们一个宽度的 100%。 要对此进行测试，您可以删除子菜单，您将看到标题相对于菜单始终具有相同的偏移量。

更新 fiddle :http://jsfiddle.net/s08j9od8/2/

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

旧答案:

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

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

我用一个工作示例做了一个 fiddle ，还解决了响应版本(标题与移动菜单重叠)

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