ASP 动态菜单 子菜单 鼠标悬停在子菜单上时消失。

Posted 2023-03-06

【中文标题】ASP 动态菜单 子菜单 鼠标悬停在子菜单上时消失。

【英文标题】：ASP Dynamic Menu Sub Menu Disappears on mouse over of submenu.

【发布时间】：2014-04-27 18:59:00

【问题描述】：

我被要求更新和解决问题的网站的子菜单消失时遇到问题（创建的员工不再在这里）。诚然，我不是 UI 人，但我试图弄清楚这一点。

当用户将鼠标悬停在父菜单项上时，会显示菜单选项和子菜单，但是一旦将鼠标移到子菜单上，它就会消失。我将DisappearAfter 标记提高到 9999。虽然现在显示菜单，但我无法单击菜单项进行导航。

       <div id="navigation-container" >
        <div id="navigation" >
            <asp:Menu ID="menuNavigation" StaticDisplayLevels="1" StaticSubMenuIndent="0" Orientation="Horizontal" 
                      Font-Names="Arial, Gill Sans" runat="server" DynamicEnableDefaultPopOutImage="True" 
                      StaticEnableDefaultPopOutImage="False" DisappearAfter="9999" DynamicHoverStyle-CssClass="navmenuitemhover" 
                      StaticSelectedStyle-BackColor="Red">
                <DynamicMenuStyle CssClass="headerzindex10" />
                <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="navlevel1"  />
                    <asp:MenuItemStyle CssClass="navlevel2" />
                    <asp:MenuItemStyle CssClass="navlevel3" />
                </LevelMenuItemStyles>
            </asp:Menu>
        </div>
        <asp:Label ID="lblOverview" runat="server" Text="Overview" CssClass="overviewLink"  />

    </div>

CSS 代码：

#navigation-container
   
width: 100%;
color: #000;
top:60px;
position:fixed; 
left:0px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF);
BACKGROUND-COLOR: #4b79bc;
z-index:10;



#navigation

margin:0px; 
position:fixed; /* This fixes the menu items issue*/    
padding-left:5px;
z-index:10;


.navlevel1

color: white;  
z-index:10;
top:35px;
padding:5px;



.navlevel2

color: black;
font-family: Gill Sans MT !important;
font-size: small;  
background-color: #a5bcdd;  
z-index:10;
top:35px;


.navlevel3

color: black;
background-color: #dbe4f1;
font-family: Gill Sans MT !important;
font-size: small;
z-index:10;


.navmenuitemhover

background-color:#253c5e;
color:White;    
font-weight:bold;
z-index:10;


.headerzindex10

position:relative;
z-index:10;

任何帮助将不胜感激。

【参考方案1】：

经过多次搜索、CSS 编辑和将菜单重新设置为 JQ 菜单后，我发现 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF); 行导致了问题。我们公司使用 IE8 作为标准，我们无法升级。

发现问题后的研究表明，在 CSS 中使用过滤器会导致功能和元素位置出现很多问题，最好不要使用它们。

要修复的 2 个选项是使用在 <DIV> 中重复的背景图像，或者删除并仅使用纯色。由于菜单栏区域足够小，我们只使用了endColorstr 作为菜单，它与标题的渐变很好地融合在一起。