Question

我几天来一直在努力解决这个asp.net菜单控件问题，这让我发疯了。代码如下：

<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" CssClass="hrMainMenu" DynamicHorizontalOffset="1" >
    <DynamicHoverStyle ForeColor="White" Font-Bold="True" />
    <DynamicMenuItemStyle ForeColor="White" />
    <DynamicMenuStyle Width="97px" HorizontalPadding="1px" />
    <DynamicSelectedStyle ForeColor="White" />
    <DynamicItemTemplate>
        <div class="dinamicMenuItemTemplate">
            <asp:Label ID="Label2" runat="server" Text='<%# Eval("Text") %>' EnableTheming="True"></asp:Label>
        </div>
    </DynamicItemTemplate>
    <StaticMenuItemStyle ForeColor="White" CssClass="StaticMenuItemStyle" />
    <StaticMenuStyle HorizontalPadding="10px" CssClass="StaticMenuStyle" />
    <StaticSelectedStyle CssClass="staticMenuItemTemplateSelected" ForeColor="Red" />
        <StaticItemTemplate>
            <div class="staticMenuItemTemplate">
                <div class="innerMenuElement">
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("Text") %>'></asp:Label></div>
                </div>
        </StaticItemTemplate>
    </asp:Menu>

现在这是我的css：

.staticMenuItemTemplate 
{
    background-position: left;
    background-image: url('../../images/mainLayout/menuDefault.png');
    background-repeat: no-repeat;
    width: 100px;
    text-align: center;
    height: 25px;
    position: relative;
    top: 0px;
    left: 0px;
}
.staticMenuItemTemplate:hover
{
    background-image: url('../../images/mainLayout/menuHover.png');
    background-repeat: no-repeat;
    background-position: left;
    font-weight: bold;
}
.staticMenuItemTemplateSelected
{
    background-image: url('../../images/mainLayout/menuSelected.png') !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
    color: #FF00FF !important;
}

我想在选择菜单项时显示不同的图像（menuSelected.png），但是当staticMenuItemTemplate:hover类似乎工作且图像确实发生变化时，类staticMenuItemTemplateSelected不会。只有文字变为粉红色，但图像不会改变。

感谢您的帮助。

Answer 1

我认为问题与HTML为此控件呈现的方式有关。在我的测试中，我最终得到了类似的东西：

<td>
  <a class="... staticMenuItemTemplateSelected ..." ...>
    <div class="staticMenuItemTemplate">
      <span>Menu text here</span>
    </div>
  </a>
</td>

因此，您可以看到<a>标记正在应用staticMenuItemTemplateSelected，但内部<div>正在获取staticMenuItemTemplate类，该类最终会覆盖staticMenuItemTemplateSelected样式，因为它更具体。

如果您将.staticMenuItemTemplateSelected的声明更改为

.staticMenuItemTemplateSelected .staticMenuItemTemplate
{
    background-image: url('../../images/mainLayout/menuSelected.png') !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
    color: #FF00FF !important;
}

你将使该风格比.staticMenuItemTemplate的风格更具体，它应该有效。

使用FireFox

FireBug是调查CSS古怪问题的绝佳工具。

Asp.net菜单选择项目

1 个答案: