Question

我有以下代码。正如您将看到的，有两个div，一个在另一个之上。第一个（红色）包含导航，第二个（橙色）通常包含一些内容。导航分为两个级别。第一级导航将始终处于活动状态，但只要我们位于“菜单3”页面上，级别2才会处于活动状态。这意味着当级别2处于活动状态时，包含导航的div将变得更高。任何想法，我怎么能得到它将不胜感激。我附上了一个带有视觉解释的图像。以下是视觉说明：http://s2.postimg.org/c9u7afy8p/example.jpg

<div id="first">
  <ul id="level1">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>
      menu 3
      <ul id="level2">
        <li>menu 3.1</li>
        <li>menu 3.2</li>
        <li>menu 3.3</li>
        <li>menu 3.4</li>
      </ul>
    <li>menu 4</li>
    <li>menu 5</li>
    </li>
  </ul>
</div>
<div id="second"></div>

/*CSS*/

#first{
  background:red;
}
#second{
  width:100%;
  height:200px;
  background:orange;
}
ul li{
  display:inline;
  padding-left:30px;
}
ul li ul{
  display:none;
}
ul li:hover ul{
  display:block;
}

Answer 1

您可以将级别2导航的样式（即下拉菜单）设置为position: absolute，然后将其背景颜色设置为red。当您查看下拉菜单时，这不会增加包含您的菜单的<div>的高度，如下所示：

#first{
  background:red;
}
#second{
  width:100%;
  height:200px;
  background:orange;
}
ul li{
  display:inline-block;
  padding-left:30px;
}
ul li ul{
  display:none;
  position: absolute;  
  background: red;  
  padding-left: 0px;
}
ul li ul li{
  display: block; 
  padding-left: 0px;
  padding: 10px;
}
ul li:hover ul{
  display:block;
}

<div id="first">
  <ul id="level1">
    <li>menu 1</li>
    <li>menu 2</li>
    <li>
      menu 3
      <ul id="level2">
        <li>menu 3.1</li>
        <li>menu 3.2</li>
        <li>menu 3.3</li>
        <li>menu 3.4</li>
      </ul>
    <li>menu 4</li>
    <li>menu 5</li>
    </li>
  </ul>
</div>
<div id="second"></div>

2级css菜单，调整div的高度

1 个答案: