純CSS下拉展開DIV背景

Question

我創建一個純CSS下拉使用ul和li，但由於條件的限制（以前的代碼，我不能改變）的導航欄是div，它有它的一些鏈接（a） 。

當我添加一個CSS下拉菜單時，無論何時我將鼠標懸停在ul區域（可以在我的jsfiddle和代碼中看到），div都會展開。我試圖弄清楚是否有辦法在div上顯示下拉菜單，因此它不會在div被放下時展開。

我嘗試了不同的職位和z-index，但沒有一個工作。 我樣機代碼：

<div style="background-color: yellow"> 
<a herf=#> One </a> 
<a herf=#> Two </a> 
<a herf=#> Three </a> 
<a herf=#> Four </a> 
<a herf=#> Five</a> 
    <ul> 
     <li><a href="#">dropdown</a> 
      <ul> 
       <li><a href="#">item1</a></li> 
       <li><a href="#">item2</a></li> 
       <li><a href="#">item3</a></li> 
      </ul> 
     </li> 
</div> 

<style> 
ul{ 
    padding: 0 20px; 
    list-style: none; 
    position: relative; 
    display: inline-block; 
} 

ul li:hover > ul { 
    display:block; 
} 

/* Fisrt Tier Dropdown */ 
ul li ul { 
    display:none; 
} 
</style> 

http://jsfiddle.net/kox1b63q/1/

謝謝您的建議

Answer 1

也許這就是你需要什麼？ http://jsfiddle.net/jasonslyvia/kox1b63q/2/

這裏的關鍵是理解position屬性。

Answer 2

你可以定位絕對下拉：

ul li:hover > ul { 
    display:block; 
    position: absolute; 
}