CSS子菜单被主内容遮挡，如何使其显示在顶层？

你的问题核心是**CSS堆叠层级（z-index）**问题，主内容区域的层级高于子菜单，导致子菜单被遮挡。按以下步骤修改即可解决：

关键修改点 #

• 给固定导航栏设置更高的z-index值，确保它的所有子元素（包括下拉菜单）都能在主内容上方显示
• 为主内容区域添加左侧外边距，避免内容被固定导航栏覆盖
• 修正代码里的小语法错误（比如padding:10x的笔误）

修改后的完整代码 #

<style>
nav {
    width: 15%;
    background-color: silver;
    color: #333;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    height: 100vh;
    position: fixed;
    overflow-y: auto;
    z-index: 999; /* 新增：设置足够高的层级，确保导航栏及子菜单在最上层 */
}

nav ul{
    position: relative;
    list-style-type: none;
    padding: 0; /* 新增：移除默认内边距，让菜单对齐更整齐 */
}

nav ul li a{
    display : flex;
    align-items : center;
    font-family: arial;
    font-size: 1.15em;
    text-decoration: none;
    text-transform: capitalize;
    color: #000;
    padding: 10px 30px; /* 修正：把10x改成10px */
    height: 50px;
    transition: .5s ease;
    border-radius: 0 30px;
}

nav ul .dropdown{
    position : relative;
}

nav ul li a:hover{
    background: rgba(0,0,0,0.7);
    color: #fff;
}

nav ul ul{
    position: absolute;
    left: 100%; /* 优化：用100%代替固定值250px，适配不同宽度的导航栏 */
    width :200px;
    top: 0;
    display: none;
    background: rgba(155,39,176,.4);
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,1);
    z-index: 1000; /* 确保子菜单层级高于父导航 */
} 

nav ul ul span{
    position: absolute;
    right: 20px;
    font-size: 1.5em;
} 

nav ul .dropdown:hover ul {
    display: initial;
}   

#main-content {
    margin-left: 15%; /* 新增：给主内容留出导航栏的宽度空间，避免内容被遮挡 */
    padding: 20px;
    box-sizing: border-box;
}
</style>

</head>

<nav>
    <ul>
        <li><a href="javascript:void(0);" onclick="changeContent('Dashboard')">Dashboard</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Sales')">Sales</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Purchases')">Purchases</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Products')">Products</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Payments')">Payments</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Inventory')">Inventory</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Accounts')">Accounts</a></li>
        <li><a href="javascript:void(0);" onclick="changeContent('Collection')">Collection</a></li>
        <li class="dropdown"><a href="javascript:void(0);" onclick="changeContent('Reports')">Reports<span>&rsaquo;</span> </a>
            <ul>
                <li><a href="javascript:void(0);" onclick="changeContent('Ledger')">Ledger</a></li>
                <li><a href="javascript:void(0);" onclick="changeContent('Inventory')">Inventory</a></li>
                <li><a href="javascript:void(0);" onclick="changeContent('Purchases')">Purchases</a></li>
            </ul>
        </li> 
    </ul>
</nav>

<section id="main-content">
    <!-- Default content -->
    <h1>Welcome to the Billing Software</h1>
    <p>Select an option on the left to view specific content.</p>
</section>

说明 #

1. z-index设置：给nav设置z-index:999，子菜单设置z-index:1000，确保它们的堆叠层级高于主内容区域。
2. 主内容边距：#main-content的margin-left:15%和导航栏宽度一致，避免主内容被固定导航栏覆盖，同时也让子菜单能完整显示在主内容上方。
3. 子菜单位置优化：把left:250px改成left:100%，让子菜单始终对齐导航栏右侧，适配不同屏幕尺寸。

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