css 使子菜单重叠

Question

我有一个运行良好的菜单，但子菜单项在太长时会重叠。我尝试将 line-height 设置为 24px，这使文本正常，但是悬停背景颜色的东西太小了。代码如下：

.nav ul {
  list-style: none;
  background-color: #5FD6D6; /*nav background */
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: black; /* font color */
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #BFEFEF; /* hover color */
}
 
.nav a.active {
  background-color: #ED1C24; /*selected color */
  color: white;
  cursor: default;
}

  /* Sub Menus */
.nav li li {
  font-size: 1em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<div class="nav">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Tutorials</a>

            <ul>
                <li><a href="#">Tutorial #1@@</a>
                </li>
                <li><a href="#">Tutorial #2</a>
                </li>
                <li><a href="#">Tutorial #3</a>
                </li>
            </ul>
        </li>
        <li><a class="active" href="#">About</a>
        </li>
        <li><a href="#">Newsletter</a>

            <ul>
                <li><a href="#">News #1</a>
                </li>
                <li><a href="#">News #2@@@</a>
                </li>
                <li><a href="#">News #3</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

已经有一些可行的答案，但是如果您希望子导航项根据需要增加宽度（而不是增加高度），我建议从 .nav li 中删除明确的 width （在媒体查询中），并将其作为min-width 添加到.nav > ul > li（也在媒体查询中）。

（在个人层面上，如果导航项根据需要增加宽度并坚持一行，而不是换行并增加高度，我发现它更具可读性。）

所以这两个声明块将来自：

@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav > ul > li {
    text-align: center;
  }
}

收件人：

@media screen and (min-width: 650px) {
  .nav li {
    border-bottom: none;
    height: 100px;
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
  }

  .nav > ul > li {
    text-align: center;
    min-width: 150px; /* new */
    margin-right: -4px; /* moved */
  }
}

请注意，我还在声明块之间移动了否定的margin-right，因为这似乎会导致子导航项的背景出现一些问题。这是一个JSFiddle 来演示代码的实际运行情况。

希望这会有所帮助！如果您有任何问题，请告诉我。

Answer 2

您可以删除对我有用的“高度”：

.nav li {
    width: 150px;
    border-bottom: none;
    /*height: 100px;*/
    line-height: 100px;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

Answer 3

我不喜欢将line-height 设置得那么大，除非是特殊情况。 在您的情况下，我认为使用padding 更合适，而不是那么大。

所以这样做：

首先删除.nav li上的line-height和height，然后它现在看起来像这样。

.nav li {
  width: 150px;
  border-bottom: none;
  font-size: 2em;
  display: inline-block;
  margin-right: -4px;
}

然后在您的.nav a 中添加一个填充：

.nav a {
  text-decoration: none;
  color: black;
  display: block;
  transition: .3s background-color;
  padding: 1em 0;
}

这样，您的列表比固定高度更灵活。

工作示例

.nav ul {
  list-style: none;
  background-color: #5FD6D6; /*nav background */
  text-align: center;
  padding: 0;
  margin: 0;
}
.nav li {
  border-bottom: 1px solid #888;
}
 
.nav a {
  text-decoration: none;
  color: black; /* font color */
  display: block;
  transition: .3s background-color;
  padding: 1em 0;
}
 
.nav a:hover {
  background-color: #BFEFEF; /* hover color */
}
 
.nav a.active {
  background-color: #ED1C24; /*selected color */
  color: white;
  cursor: default;
}

  /* Sub Menus */
.nav li li {
  font-size: 1em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 150px;
    border-bottom: none;
    font-size: 2em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

<div class="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
          <ul>
            <li><a href="#">Tutorial #1@@</a></li>
            <li><a href="#">Tutorial #2</a></li>
            <li><a href="#">Tutorial #3</a></li>
          </ul>
        </li>
        <li><a class="active" href="#">About</a></li>
        <li><a href="#">Newsletter</a>
          <ul>
            <li><a href="#">News #1</a></li>
            <li><a href="#">News #2@@@</a></li>
            <li><a href="#">News #3</a></li>
          </ul>
        </li>
      </ul>
    </div>