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

Posted

技术标签:

【中文标题】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 个选项是使用在 &lt;DIV&gt; 中重复的背景图像,或者删除并仅使用纯色。由于菜单栏区域足够小,我们只使用了endColorstr 作为菜单,它与标题的渐变很好地融合在一起。

【讨论】:

以上是关于ASP 动态菜单 子菜单 鼠标悬停在子菜单上时消失。的主要内容,如果未能解决你的问题,请参考以下文章

悬停列表项时菜单消失

带有悬停子菜单的固定菜单有点关闭

带有水平子菜单的纯 html css 菜单。悬停在 IE 中无法正常工作

悬停在下拉菜单上时保持主导航项悬停 CSS

Bootstrap 3下拉菜单在子菜单焦点上更改背景

鼠标悬停子菜单时禁用 .slideUp 功能