html - 带有距离的子菜单，悬停时关闭

Question

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

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 .

内边距确保悬停效果在元素之间保持事件状态(内边距是元素的一部分，因此也有悬停)。