html - 仅使用 HTML+CSS 的适当子菜单

Question

我正在尝试编写一个没有任何绝对定位或 JS 的简单 HTML+CSS 菜单。我的问题是关于子菜单，它要么展开当前选定的元素，要么将其替换:

HTML 很简单:

<ul id="menu">
    <li>Item 1</li>
    <li>Folder 1
    <ul>
        <li>Item 2</li>
    </ul>
    </li>
    <li>Item 3</li>
</ul>

CSS 也是如此:

#menu, #menu ul {
    border-style: solid;
    border-width: 0px;
    border-top-width: 1px;
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 180px;
}

#menu li ul {
    background-color: cyan;
    display: none;
    position: relative;
    right: -168px;
    width: auto;
}

#menu li:hover ul {
    display: block;
}

#menu li {
    border-style: solid;
    border-width: 1px;
    border-top-width: 0px;
    padding: 10px;
}

#menu li:hover {
    background-color: lightgrey;
    font-weight: bold;
}

我以为子菜单只有在重新定位后才能影响布局，这似乎这里不是这种情况。我有点不知所措。

Answer 1

使用这种类型的菜单模式，你应该在子菜单的父 LI 上使用 position:relative，并且 position:absolute 在 UL 子菜单上。允许子元素相对于其父元素出现在布局流之外。

将所有非位置样式放在每个 LI 内的 A 标签上并使用 display:block 也是一种很好的做法。如果没有它，您将很难为“文件夹 1”上的文本设置样式。

简单示例:http://jsfiddle.net/Diodeus/jejNy/127/