Question

我有一个非常好的菜单，但是当菜单太长时，子菜单项会重叠。我尝试将行高设置为24px，这使文本正常，但随后悬停的背景颜色太小了。这是代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以删除对我有用的＆＃34; height＆＃34;：

.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更合适，而不是那么大。

所以要做到这一点：

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

.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

已经有一些可行的答案，但是如果您希望子导航项目根据需要增加宽度（而不是增加高度），我建议删除明确的{{1}来自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 */ } }，因为这似乎导致了子导航项的一些问题。背景。这是一个JSFiddle来演示代码的实际效果。

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

css使子菜单重叠

3 个答案: