Question

我正在使用ul和li创建一个纯css下拉列表，但是由于约束（之前的代码我无法更改），导航栏是div并且它有一些链接（a）在其中。

当我添加一个css下拉时，只要我在ul区域上空盘旋，div就会展开（如我的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;
}

纯css下拉扩展div背景

2 个答案: