求助：下拉列表展开后被遮挡，需显示于顶层且不扩展边框

我希望下拉列表展开时能显示在所有元素顶层，但列表似乎被遮挡（已排除边框原因）。同时希望鼠标悬停时，下拉内容不扩展外层边框而是直接覆盖。尝试修改z-index、移除边框等操作均无效，寻求帮助。

我的CSS代码 #

.dropDownContent {
        display: none;
        position: absolute;
        width: 90px;
    }

    .dropDown:hover .dropDownContent {
        display: block;
    }

    .border {
        border: 2px solid black;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        margin: 0 auto;
        max-width: 500px;
    }

母版页代码 #

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="web_pages_MasterPage" ClientIDMode="Static" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <meta charset="utf-8" />
    <link href="../CSS/extarnelStyle.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <script src="../JS/JavaScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <ul>
            <li class="dropDown">//第一个下拉列表
                <a href="login.aspx">login</a>
                <div class="dropDownContent">
                    <a href="register.aspx">register</a>
                    <a href="recover_password.aspx">recover password</a>
                    <asp:LinkButton runat="server" OnClick="LogOut">Logout</asp:LinkButton>
                </div>
            </li>
            <li><a href="main_page.aspx">main page</a></li>
            <li><a href="a.aspx">a</a></li>
            <li><a href="b.aspx">b</a></li>
            <li><a href="c.aspx">c</a></li>
            <li runat="server" id="bar1"><a href="d.aspx">d</a></li>
            <li runat="server" id="bar2"><a href="e.aspx">e</a></li>
            <li><a href="f.aspx">f</a></li>
            <li class="dropDown" runat="server" id="bar3">//第二个下拉列表
                <a>admin</a>
                <div class="dropDownContent">
                    <a runat="server" href="f.aspx">f</a>
                    <a runat="server" href="g.aspx">g</a>
                </div>
            </li>
        </ul>
        <h3 style="margin-top: 130px;"><%="header" + Session["userName"] %></h3>
        <hr />
        <a href="main_page.aspx">
            <img src="../IMG/logo.png" alt="logo" style="width: 300px; height: 120px; position: absolute; top: 0; right: 0;">
        </a>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </form>
</body>
</html>

1. 修复下拉列表被遮挡问题 #

核心问题是绝对定位的下拉内容缺少正确的定位参照，且层级不足。修改CSS如下：

.dropDown {
    position: relative; /* 让下拉内容以当前li为定位基准 */
    z-index: 999; /* 提升父元素层级，避免被其他元素覆盖 */
}

.dropDownContent {
    display: none;
    position: absolute;
    width: 90px;
    z-index: 1000; /* 比父元素层级更高，确保显示在最顶层 */
    background-color: white; /* 添加背景色，防止和下层内容透明重叠 */
    top: 100%; /* 下拉内容紧贴父元素底部 */
    left: 0;
    margin: 0;
    padding: 0;
}

2. 实现下拉内容覆盖不扩展外层边框 #

绝对定位元素本身脱离正常文档流，不会撑开父元素，但需要修正导航栏默认样式的干扰。补充ul的基础样式：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* 横向排列导航项，可根据布局调整 */
    gap: 20px;
}

.dropDownContent a, .dropDownContent asp\:LinkButton {
    display: block; /* 让链接占满下拉框宽度 */
    padding: 8px 12px;
}

修改后，下拉列表会在鼠标悬停时显示在所有元素上方，且不会撑开外层的.border容器，直接覆盖在页面内容上。

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