0

我正在尝试编写一个没有任何绝对定位或 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;
}

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

4

2 回答 2

2

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

将所有非位置样式放在A每个内部的 -tag上LI并使用display:block. 如果没有它，您将很难为“文件夹 1”上的文本设置样式。

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

于 2013-08-09T19:42:10.827 回答
1

position:absolute在 ul 和position:relativeLI 上使用：

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: absolute;
    top:-1px;
    left: 178px;
}

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

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

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

看看这个CodePen

于 2013-08-09T20:11:05.913 回答