CSS 弹出菜单不适用于 ASP 母版页答案

【问题标题】：CSS pop-up menu not working with ASP Master PageCSS 弹出菜单不适用于 ASP 母版页
【发布时间】：2022-01-22 03:32:57
【问题描述】：

我画了一个草图来帮助说明这种情况： https://i.stack.imgur.com/iZLbY.png

我们正在使用母版页。屏幕顶部有一个标题，包括右上角的“个人资料”菜单。（帐户设置、注销按钮等）如果您将鼠标悬停在菜单上，它会向下展开。

页眉下方是母版页填充的主要内容。

问题：将鼠标悬停在“个人资料”菜单上时，它会在主要内容上方向下展开。如果鼠标停留在标题中，则一切正常。但是一旦他们进入主要内容区域，“悬停”就会停止并且菜单消失。这使得点击“个人资料”菜单中的任何内容变得非常困难。

我尝试过的： 考虑到这可能是一个重叠问题（主要内容与配置文件菜单重叠），我使用 z-index，希望将配置文件菜单放在顶部。不幸的是，这似乎没有影响。

尝试将主要内容缩小到只有 10 像素宽。这消除了重叠。该问题在此测试期间未发生，确认与重叠有关。

还尝试重建页面，并将其剥离到其准系统。不幸的是，这并没有解决问题。

以下是准系统 HTML/CSS。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Test.master.cs" Inherits="TestProject.Test" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Title</title>

    <style>
.profile-wrapper {
    width:200px;
}
.profile-wrapper::after {
    content: &#39;&#39;;
    position: absolute;
    top: 20px;
    right: 10px;
    border-color: #333 transparent transparent;
    border-width: 6px;
    border-style: solid;
}
.profile-wrapper::before {
    content: &#39;&#39;;
    position: absolute;
    top: 20px;
    right: 10px;
    border-color: #eee transparent transparent;
    border-width: 6px;
    border-style: solid;
}
.profile-wrapper:hover::after {
    border-color: #111 transparent transparent; 
}

.profile {
    padding:10px;
    border:1px solid #000;
    border-radius:3px;
    z-index:100;
}
.profile:hover {
    cursor:pointer;
}
.profile .name {
    font-size:12px;
    color:#fff;
    line-height:26px;
    margin-left:10px;
}
.profile .name:hover {
    color:#0088cc;
}
.profile img {
    width:25px;
    display:inline;
    float:left;
    border:1px solid #111;
    border-radius:3px;
    box-shadow:0 0 3px rgba(0, 0, 0, 0.5) inset;
}

/* hide menu */
.menu {
    display:none;
    clear:both;
    margin:20px 0 0 0;
}
.menu li {
    font-size:12px;
    margin:0;
  padding: 10px 4px;
}
.menu li a {
    color:#555;
}
.menu li:hover &gt; a{
    color:#eee;
}

.menu li:hover{
    border-left: 1px solid #111;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
  border-top: 1px solid #111;
  border-radius: 3px;
}

/* hover profile show menu */
.profile:hover .menu {
    display:block;
}
    </style>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="HeaderBar" style="background-color:#DDDDDD; z-index: 100;">
            <a href="Home.aspx">
                <asp:Image ID="LogoImage" runat="server" ImageUrl="~/Images/Logo.png" style="margin-top: 4px; width: 285px"/>
            </a>
            <div style="right: 14px; top: 10px; position: absolute">
                <div class="profile-wrapper">
                    <!-- user profile -->
                    <div class="profile">
                        Profile
                    
                        <!-- more menu -->
                        <ul class="menu">
                            <li><a href="#">Edit</a></li>
                            <li><a href="#">Change Password</a></li>
                            <li><asp:LinkButton ID="LinkButton1" runat="server">Logout</asp:LinkButton></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div id="MainContent" style="left:260px; top:50px; position:absolute; width: calc(100% - 260px - 20px); z-index: 50;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>

    </form>
</body>
</html>

【问题讨论】：

标签： html css asp.net

【解决方案1】：

我不完全理解为什么会这样，但是将主要内容的 z-index 设置为 -50 解决了这个问题。

以前我使用 50 作为主要内容，100 作为菜单。在我看来，这应该有效，但没有。

但使用 -50 和 100 有效。

【讨论】：