HTML嵌套列表仅可悬浮的子列表的第一个元素

Question

我有一个简单的嵌套ul，子列表显示在其父列表的右边。但是，如果我将鼠标悬停在第一个以外的其他子列表元素（直接在父列表项上），则父ul的悬停会丢失。这是一个可以查看问题的代码段：

#btn {
    position: fixed;
    z-index: 5;
    top: 15px;
    left: 15px;
    cursor: pointer;
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
    width: 35px;
    height: 2px;
    margin-bottom: 8px;
    background-color: #00dffc;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
}
#btn.active {
    left: 230px;
}
#btn.active div {
    background-color: #343838;
}
#btn.active #top {
    transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
    opacity: 0;
    transform: rotate(135deg);
}
#btn.active #bottom {
    transform: translateY(-10px) rotate(-45deg);
}
#box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    left: 0px;
    width: 500px;
    opacity: 1;
    padding: 20px 0px;
    height: 100%;
    background-color: lightblue;
    color: white;
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
    left: 0px;
    opacity: 1;
}
#items {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    list-style-type: none;
    padding-left: 0;
}
#items .item {
    position: relative;
    cursor: pointer;
    font-size: 2em;
    padding: 15px 30px;
    transition: all 250ms;
}
#items .item:hover {
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
}
#items > li > ul{
    display: none;
    top: 0px;
}
#items > li:hover > ul {
    list-style-type: none;
    margin-left: 25px;
    position: absolute;
    display: inline;
}
#items > li > ul:hover {
    list-style-type: none;
    margin-left: 25px;
    position: absolute;
    display: inline;
}
#items > li > ul > li{
    border: 1px solid;
    transition: all 250ms;
    padding: 15px 30px;

}
#items > li:hover > ul > li:hover{
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
}
#btn, #btn * {
    will-change: transform;
}
#box {
    will-change: transform, opacity;
}

<div id="box">
    <ul id="items">
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
            </li>
            <li class="item">Item 4
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
                </ul>
            </li>
            <li class="item">Item 5
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
            </li>
            <li class="item">Item</li>
            <li class="item">Item</li>
            <li class="item">Item</li>
    </ul>
</div>

我给了子列表框，以便您可以看到它们的限制。 如您所见，您只能将鼠标悬停在第一个子项目上。有人可以帮我解决这个问题吗？

Answer 1

您只需要将z-index设置为嵌套的<ul>。否则，您将触发下一个<li>的悬停。

  

要了解有关z-index的更多信息，请查看its documentation

#btn {
    position: fixed;
    z-index: 5;
    top: 15px;
    left: 15px;
    cursor: pointer;
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
    width: 35px;
    height: 2px;
    margin-bottom: 8px;
    background-color: #00dffc;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
}
#btn.active {
    left: 230px;
}
#btn.active div {
    background-color: #343838;
}
#btn.active #top {
    transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
    opacity: 0;
    transform: rotate(135deg);
}
#btn.active #bottom {
    transform: translateY(-10px) rotate(-45deg);
}
#box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    left: 0px;
    width: 500px;
    opacity: 1;
    padding: 20px 0px;
    height: 100%;
    background-color: lightblue;
    color: white;
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
    left: 0px;
    opacity: 1;
}
#items {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    list-style-type: none;
    padding-left: 0;
}
#items .item {
    position: relative;
    cursor: pointer;
    font-size: 2em;
    padding: 15px 30px;
    transition: all 250ms;
}
#items .item:hover {
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
}
#items > li > ul{
    display: none;
    top: 0px;
}
#items > li:hover > ul {
    list-style-type: none;
    margin-left: 25px;
    position: absolute;
    display: inline;
    z-index: 10;
}
#items > li > ul:hover {
    list-style-type: none;
    margin-left: 25px;
    position: absolute;
    display: inline;
    z-index: 10;
}
#items > li > ul > li{
    border: 1px solid;
    transition: all 250ms;
    padding: 15px 30px;

}
#items > li:hover > ul > li:hover{
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
}
#btn, #btn * {
    will-change: transform;
}
#box {
    will-change: transform, opacity;
}

<div id="box">
    <ul id="items">
            <li class="item">Item 1</li>
            <li class="item">Item 2</li>
            <li class="item">Item 3
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
            </li>
            <li class="item">Item 4
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
                </ul>
            </li>
            <li class="item">Item 5
                <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
            </ul>
            </li>
            <li class="item">Item</li>
            <li class="item">Item</li>
            <li class="item">Item</li>
    </ul>
</div>