1

我在配置我的 asp:Menu 时遇到问题。当我使用任何 CSS 时，菜单项不再被选中。我尝试了 3 个版本，每个版本都有它的缺点。

这个最适合css，但所选项目没有被选中。

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" Orientation="Horizontal" StaticEnableDefaultPopOutImage="false"DataSourceID="smdsMaster" StaticDisplayLevels="2">
    <LevelMenuItemStyles>
        <asp:MenuItemStyle ForeColor="White"/>
        <asp:MenuItemStyle ForeColor="White" />
    </LevelMenuItemStyles>
    <Items>
        <asp:MenuItem Text="Menu 1" NavigateUrl="~/Menu1.aspx" />
        <asp:MenuItem Text="Menu 2"  NavigateUrl="~/Menu2.aspx" >
            <asp:MenuItem Text="Submenu 2" NavigateUrl="~/Submenu2.aspx" />
        </asp:MenuItem>
    <asp:MenuItem Text="Menu 3" NavigateUrl="~/Menu3.aspx" />
    </Items>
</asp:Menu>

这个显示已选中，但我不能使用图像作为菜单项的背景。如果我在其中添加 css，则选择将不再显示。并且子项始终存在。

<asp:Menu ID="NavigationMenu" runat="server" DataSourceID="smdsMaster" DynamicHorizontalOffset="0" StaticEnableDefaultPopOutImage="false"
 Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="0px"  MaximumDynamicDisplayLevels="2" OnMenuItemDataBound="Menu1_MenuItemDataBound"
 ForeColor="White" BackColor="#EE7B00" StaticItemFormatString="<p align=center> {0}" DynamicItemFormatString="<p align=center> {0}">
    <StaticMenuItemStyle BackColor="#EE7B00" Width="110px" Height="31px" HorizontalPadding="0px" VerticalPadding="0px" />
    <StaticHoverStyle BackColor="#CCCC00" />
    <StaticSelectedStyle BackColor="#CCCC00" />
    <DynamicMenuItemStyle HorizontalPadding="0px" VerticalPadding="0px" Width="110px" Height="31px" />
    <DynamicHoverStyle BackColor="#CCCC00" />
    <DynamicMenuStyle BackColor="#EE7B00" />
    <DynamicSelectedStyle BackColor="#CCCC00" />
</asp:Menu>

我怎样才能拥有两者：图像作为我的菜单项的背景，上面有文字，并选择了显示女巫项目。

谢谢。

更新

这是与之配套的 CSS：

.page .header_menu .menu
{
    !margin: 0px;
    padding: 0;
    list-style: none;
    background: none;
    z-index: 3;
}

.page .header_menu .menu li
{
    padding: 0;
    margin: 0;
    height: 31px;
    list-style: none;
    background-repeat: no-repeat;
    float: left;
    width: 110px;
}

.page .header_menu .menu li a
{
    display: block;
    text-decoration: none;
    text-align: center;
    height: 31px;
    width: 110px;
    padding-top: 5px;
    background-repeat: no-repeat;
    background-image: url(../Assets/btn-back-normal.gif);
    color: white;
    margin-top: -1px; /*Chrome = -16, IE = 0*/
    z-index: 1;
}

.page .header_menu .menu li a:hover
{
    background-image: url(../Assets/btn-back-over.gif);
    color: white;
    margin-top: -1px; /*Chrome = -16, IE = 0*/
    z-index: 1;
    width: 110px;
}

.page .header_menu .menu li a:active, .page .header_menu .menu li a:selected
{
    background-image: url(../Assets/btn-back-selected.gif);
    color: white;
    margin-top: -1px;
    z-index: 1;
    width: 110px;
}

.page .header_menu .menu:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    z-index: 1;
    width: 110px;
}

我也尝试设置这些，但只有第一个项目保持选中状态，无论实际选择哪个

<style type="text/css">
#NavigationMenu a{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.static{ padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.static.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;}
#NavigationMenu a.dynamic{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #EE7B00;}
#NavigationMenu a.dynamic.selected{padding-right: 0px; padding-left: 0px; padding-top: 5px; height: 26px; background-color: #cccc00;}
</style>
4

1 回答 1

1

如果您运行 .aspx 页面并检查源代码，您会注意到菜单项<a>（超链接）标记有一个名为a.selected.static的选定类，您可以在代码中实现您自己的版本并通过应用!important到CSS 类。

下面的示例显示了一个带有图像菜单项的简单菜单，并在选中时用红色边框突出显示图像：

<head runat="server">
    <title>Menu</title>
    <style type="text/css">
        a.selected.static
        {
            border:2px solid red !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
        <Items>
            <asp:MenuItem ImageUrl="~/Images/1.jpg" Text="Item 1" />
            <asp:MenuItem ImageUrl="~/Images/2.jpg" Text="Item 2" />
            <asp:MenuItem ImageUrl="~/Images/3.jpg" Text="Item 3" />
        </Items>
    </asp:Menu>
    </form>
</body>
于 2012-11-14T20:30:44.757 回答