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

您可以删除对我有用的 "height"：

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

Answer 2

我不喜欢设置 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>

Answer 3

已经有一些有效的答案，但如果您希望子导航项根据需要增加宽度（而不是增加高度），我建议从中删除明确的 width .nav li（在媒体查询中），并将其作为 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 来演示实际中的代码。

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

css 使子菜单重叠

css made submenu overlapping

css

submenu

overlapping