为何定位子元素后HTML背景色消失？求解决方法

问题原因 #

• .big_menu 无宽度且内部元素脱离文档流：你给.big_menu设置了100%高度，但未指定宽度；同时内部的<p>标签使用position: absolute脱离了文档流，无法撑开父元素，导致.big_menu宽度为0，背景色自然无法显示。
• hover触发逻辑断裂：当前通过.menu:hover + .big_menu控制显示，但鼠标从.menu移到.big_menu上时，.menu的hover状态消失，.big_menu会立刻变回display: none，无法保持持续显示。

修复方案 #

1. 给.big_menu添加宽度属性，让元素拥有可显示的尺寸；
2. 调整DOM结构，用父容器包裹两个菜单元素，通过父容器的hover状态控制.big_menu显示，避免鼠标移开就消失的问题；
3. 精简冗余CSS代码，减少重复定义。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript, Social">
    <meta name="description" content="Web-app to find and befriend new people!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .menu-container {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        display: flex;
    }
    
    .menu {
        width: 3%;
        background-color: greenyellow;
    }       
    
    .big_menu {
        display: none;
        width: 20%; /* 添加宽度属性 */
        background-color: greenyellow;
    }

    /* 通过父容器hover控制子元素显示，解决hover断裂问题 */
    .menu-container:hover .big_menu {
        display: block;
    }
    </style>
</head>

<body>
    <div class="menu-container">
        <div class="menu">
            <p style="position: absolute; top: 5%; left: 5.8%">Home</p>
        </div>
        <div class="big_menu">
            <p style="position: absolute; top: 5%; left: 28.8%;">Details</p>
        </div>
    </div>
</body>

</html>

修改说明 #

• 新增.menu-container父容器，将两个菜单元素包裹，利用父容器的hover状态统一控制.big_menu显示，解决鼠标移开.menu菜单就消失的问题；
• 给.big_menu添加width: 20%，让元素拥有实际宽度，背景色正常显示；
• 精简重复的CSS属性，将position: fixed、height: 100%等公共样式移到父容器中；
• 调整.big_menu内部<p>的left值，避免文字位置偏移。

内容的提问来源于stack exchange，提问作者mr.r