html - <ul> 悬停的 CSS <ul> 右侧丢失

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: 1到

#items > li > ul:hover {
    list-style-type: none;
    margin-left: 25px;
    position: absolute;
    display: inline;
    z-index: 1;
}

#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;
    z-index: 1;
}
#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>