2級CSS菜單，調整div的高度

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>