仅使用HTML+；CSS

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

HTML非常简单：

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

我认为子菜单只有在重新定位后才能影响布局，这似乎是错误的

---

在这里情况并非如此。我有点不知所措。

使用这种菜单模式，您应该在子菜单的父菜单

LI

上使用

position:relative

，在

UL

子菜单上使用

position:absolute

。允许子元素相对于其父元素出现在布局流之外

将所有非位置样式放置在每个

LI

内的

A

-标记上，并使用

显示：块

，这也是一种很好的做法。如果没有它，您将很难在“文件夹1”上设置文本样式

---

简单示例：

使用这种菜单模式，您应该在子菜单的父菜单

LI

上使用

position:relative

，在子菜单

UL

上使用

position:absolute

。允许子元素相对于其父元素出现在布局流之外

将所有非位置样式放置在每个

LI

内的

A

-标记上，并使用

显示：块

，这也是一种很好的做法。如果没有它，您将很难在“文件夹1”上设置文本样式

---

简单示例：

在ul上使用

位置：绝对

，在LI上使用

位置：相对

：

HTML:

---

查看此项

在ul上使用

位置：绝对

，在LI上使用

位置：相对

：

HTML:

---

查看此

您需要绝对定位，以防止元素“移位”。这就是绝对定位的作用。@Diodeus:

position:absolute

表示“不要触摸父元素的布局并将元素放置在x”，而

position:relative

表示“更改父元素的布局并重新定位元素”？您需要绝对定位以防止元素“移位”。这就是绝对定位的作用。@Diodeus:

position:absolute

的意思是“不要触摸父元素的布局并将元素放置在x”，而

position:relative

的意思是“更改父元素的布局并重新定位元素”？对不起，我不太明白

position:absolute

可防止对父级

li

进行任何更改，但sumbenu

ul

需要相对于其原始位置进行移动，这是使用

position:absolute

无法完成的，也不是通过移动其包含的

li

.position:relative为绝对定位的子对象设置原点。对不起，我不太明白

position:absolute

可防止对父级

li

进行任何更改，但sumbenu

ul

需要相对于其原始位置进行移动，这是使用

position:absolute

无法完成的，也不是通过移动其包含的

li

。位置：相对设置绝对定位子对象的原点。

#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;
}

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

#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;
}