求助：仅用HTML/CSS实现点击/悬停弹出菜单，子菜单无法显示

尝试仅使用HTML和CSS创建点击/悬停菜单图标弹出的菜单，主菜单正常显示，但聚焦列表指定项时子菜单无法显示，以下是基础的纯CSS解决方案：

原代码问题分析 #

1. 子菜单.box2与触发它的#nav列表项不在同一父层级，CSS无法跨父元素选择目标元素
2. 原CSS选择器#nav li:focus逻辑错误，#nav本身就是<li>元素，且<li>默认不支持聚焦（需额外设置tabindex），菜单场景更适合用hover事件实现显示

解决步骤 #

1. 调整HTML结构：将子菜单.box2嵌套到触发它的<li id="nav">内部，让CSS可通过后代选择器关联父元素的hover状态
2. 修改CSS定位：为父<li>设置position: relative，作为子菜单的定位基准，避免位置偏移
3. 修正CSS选择器：使用#nav:hover .box2控制子菜单的显示/隐藏

修改后的HTML代码 #

<!--box-->
<div class="box">
    <img src="https://img.icons8.com/ios-filled/344/menu-rounded.png" height="35px" width="35px" id="menu">
    <!--box1-->
    <div class="box1">
        <ul>
            <li id="nav">
                <a href="#">item1  &#187;</a>
                <!--box2 嵌套到li内部-->
                <div class="box2">
                    <ul>
                        <li><a href="#">sub-item1</a></li>
                        <li><a href="#">sub-item2</a></li>
                        <li><a href="#">sub-item3</a></li>
                        <li><a href="#">sub-item4</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">item2</a></li>
            <li><a href="#">item3</a></li>
            <li><a href="#">item4</a></li>
            <li><a href="#">item5</a></li>
            <li><a href="#">item6</a></li>
        </ul>
    </div>
</div>

修改后的CSS代码 #

/*---POPUP MENU CSS---*/
.box{
    position:fixed;
    top: 0.1%;
    left: 14px;
    display: inline-block;
    cursor: pointer;
}
ul{
    list-style-type: none;
    padding: 0; /* 移除默认内边距，避免菜单偏移 */
    margin: 0;
}
ul li{
    font-family: Lato;
    padding: 10px;
    position: relative; /* 为子菜单提供定位基准 */
}
ul li a{
    text-decoration: none;
    color: black;
}
ul li:hover{
    background-color: bisque;
}
.box1{
    position: absolute;
    top:3%;
    left:15px;
    z-index: 1;
    background-color: floralwhite;
    max-width: 260px;
    box-sizing: border-box;
    box-shadow: 2px 5px 15px black;
    display: none;
    padding: 0;
}
.box2{
    position: absolute;
    top: 0;
    left: 100%; /* 相对于父li右侧显示 */
    z-index: 2;
    background-color: floralwhite;
    max-width: 260px;
    box-sizing: border-box;
    box-shadow: 2px 5px 15px black;
    display: none;
}
.box:hover .box1{
    display: block;
}
#nav:hover .box2 {
    display:block;
}

额外说明 #

• 若需要点击触发（而非悬停），可给<li id="nav">添加tabindex="0"，并将选择器改为#nav:focus .box2，同时补充#nav:focus-within .box2确保子菜单在焦点移到子项时保持显示
• 移除了ul默认的padding和margin，避免菜单布局出现不必要的空隙
• 调整了.box2的定位值，让子菜单紧贴父菜单右侧显示，符合常规菜单布局

内容的提问来源于stack exchange，提问作者function13