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