Question

我有一个项目列表，其中只有第一个可见，而列表悬停显示所有项目更改周围内容位置的副作用。如何规避这种不良影响？

以下是一个示例列表： http://jsfiddle.net/dsbonev/z8Sjy/

我检查样式菜单的所有示例都有两级结构（父级 - ＆gt;子级）。在父母悬停上显示儿童。但是我没有父母可以悬停在上面，也不想将其中一个孩子作为父母推广，方法是将其移出列表，从而打破标记的语义。

Answer 1

想出来！这就是我想要的：

我接受有关此方法的缺点或改进的评论。

HTML 的

<div class="list-wrapper">
    <ul class="items">
        <li>stackoverflow</li>
        <li>superuser</li>
        <li>serverfault</li>
    </ul>
</div>

CSS

.list-wrapper, .items {
    display: inline-block;
}

.list-wrapper {
    position: relative;
    background-color: blue;
    height: 1em;
}

.items {
    position: absolute;
    background-color: red;
}

.items > li:not(:first-child) {
    display: none;
}

.items:hover > li:not(:first-child) {
    display: block;
}

Answer 2

而不是使用display: none＆amp; display: block使用visibility: hidden＆amp; visibility: visible。这样他们占用了HTML文档中的空间，但没有显示：

工作示例：http://jsfiddle.net/z8Sjy/3/

修改

以下CSS可以更加跨浏览器兼容显示/隐藏“not first-child”元素，因为选择器:not实际上是CSS3。

.items > li:first-child ~ li {
    display: none;
}

.items:hover > li:first-child ~ li {
    display: block;
}

Answer 3

您可以绝对定位列表，然后在段落中添加填充以进行补偿。

http://jsfiddle.net/z8Sjy/2/

ul列表中的单层下拉菜单可以用css设置样式吗？

3 个答案:

修改