Question

我有一个子菜单，问题是我的子菜单必须有更多的距离，并且应该在悬停上可见，所以如果我不在 li ，子菜单会关闭

enter image description here

jsfiddle上的演示代码。

HTML代码是：

<ul class="menu">
    <li> <a href="#">submenu</a>

        <ul>
            <li><a href="#">sub item 1</a>
            </li>
            <li><a href="#">sub item 2</a>
            </li>
            <li><a href="#">sub item 3</a>
            </li>
            <li><a href="#">sub item 4</a>
            </li>
            <li><a href="#">sub item 5</a>
            </li>
            <li><a href="#">sub item 6</a>
            </li>
            <li><a href="#">sub item 7</a>
            </li>
        </ul>
    </li>
</ul>

CSS是：

a {
    text-decoration: none;
}
ul.menu {
}
ul.menu li {
    list-style-type: none;
    position: relative;
    float: left;
    display: inline;
    margin: 0px 0px 1px 1px;
    padding: 0px 0px 0px 0px;
    height: 33px;
    line-height: 33px;
}
ul.menu li a {
    display: block;
    color: #5b615b;
    padding: 0px 7px 0px 7px;
    background-color: #e1e1e1;
    text-transform: uppercase;
}
ul.menu li a:hover {
    color: #000000;
    background-color: #e1e1e1;
}
ul.menu li ul {
    display: none;
    font-size: 10px;
    width: 100%;
    position: absolute;
    top: 37px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}
ul.menu li:hover > ul {
    display: block;
}
ul.menu li:hover > a {
    color: #000000;
    background-color: #e1e1e1;
}
ul.menu li:hover > ul {
    display: block;
}
ul.menu li ul li {
    position: relative;
    float: none;
    display: block;
    height: 22px;
    line-height: 22px;
    border-bottom: 1px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
ul.menu li.active ul li a {
    color: #5b615b;
    background-color: #e1e1e1;
}

Answer 1

将top上的ul.menu li ul更改为33px而不是37，并添加padding-top 1px。 Updated Fiddle here

填充确保悬停效果在元素之间保持活动状态（填充是元素的一部分，因此也悬停）。

Answer 2

ul.menu li ul {
display: none;
font-size: 10px;
width: 100%;
position: absolute;
top: 34px;
left: 0px;
margin: 0px;
padding: 0px;
}

更改顶部：37;顶部：34;如果要保留空白，可以在顶部li的底部添加3px白色边框。

jsfiddle显示此方法http://jsfiddle.net/N23AM/4/

视觉上相同，只允许悬停由边框维护，而不是失去对焦的背景。

Answer 3

正确的解决方案是在padding-top:20px;选择器中添加ul li:hover ul（当然您的期望值会在那里）。

我能想到的另一个可能是奇怪的解决方案是在你的ul子菜单中添加一个看起来像这样的新div：

<div style="height:20px; background:transparent; width:100%;"></div>

悬停的子菜单在悬停时关闭

3 个答案: