Asp.net sClass进入正确的html元素

这可能足以让你的页面按你想要的方式工作。然而，我在ASP 4.0中对所选菜单项的解决方法（将RenderingMode保留为默认设置时）是模拟控件生成的“selected”CSS类，但给我的CSS声明“！important”，以便在需要时优先使用我的样式

例如，默认情况下，菜单控件为每个菜单项呈现一个“li”元素和子元素“a”，并且所选菜单项的“a”元素将包含class=“selected”（在其他控件生成的CSS类名中，如果是静态菜单项，则包括“static”），因此我将自己的选择器添加到页面（或在单独的样式表文件中），以便“static”和“selected”“a”标记如下：

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
} 

---

我不知道为什么这里所有的答案都这么混乱。我发现了一个非常简单的答案。使用一个css类作为asp:menu，比如说mainMenu，当呈现为HTML时，它下面的所有菜单项都将是“a标记”。所以你只需为css中的“a标记”提供：hover属性。 请参见下面的示例：

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

---

我希望这能有所帮助。：

对我来说效果很好（举个简单的例子——我的菜单不是数据绑定的）。你可以发布相关的CSS类，或者一些呈现的HTML吗？谢谢你的回复，我已经发布了。在标记中查找一些设置悬停样式的Javascript。在原始的表格布局中，所选样式仅在你单击其中一个菜单选项后才应用，并且菜单进行了回发。不，没有帮助。我的类无论发生什么，e都没有被设置。看起来像个bug。我很感谢你的评论。我没有提到这是.NET 4，所以默认呈现是一个列表，而不是一个表。然后我会检查列表应用了什么样式。我没有在这里安装VS2010，所以我不能给你任何直接的提示，但是如果它以类似于origina的方式工作的话l设置然后他们直接将某种样式应用到生成的标记或使用javascript，您需要检查这些样式是什么以及它们被应用在哪里。您是对的，我已经注意到了这一点，但请参阅我的编辑，了解我认为这不是解决方案的原因。我感谢您的关注，但这确实无助于解决问题现在的问题是…我刚刚将我选择的类命名为“selected”“这对我来说还可以，谢谢你的提示。对我来说，你的解决方案似乎是最好的，因为我不需要覆盖特定于实现的类（如'a.static'）的样式。我确实丢失了一些我需要的样式，但是我现在可以只根据我在菜单和项目的CssClass属性中指定的类来设置样式。唷！我试过了，你是对的。我认为没有人使用ASP.Net菜单，因为它太多了。他们在每一个版本中都在不断增强它，但他们似乎并不理解基本需求。你怎么可能不想在菜单上指明所选的项目呢？？？我想大多数人都放弃了，只是从头开始建立自己的菜单。我坚持了下来，最终能够使它工作，但我必须研究生成的html，找出如何为它编写CSS，然后反复调整它，直到它在过去3个版本的所有浏览器中呈现相同的效果。这太痛苦了，但我能够避免使用javascript构建自定义交互菜单。需要注意的是，ASP.net菜单的默认呈现模式在4.0中发生了更改。请看这里的“备注”部分：@miketeeve这帮我节省了几个小时，谢谢。您知道如何在每个水平菜单链接之间添加分隔符图像吗？这对我很有用-我的情况与OP略有不同，因为我的菜单是静态定义的，而不是使用数据源。

<style>
    .StaticHoverStyle
    {
        background: #000000;
    }

    .StaticSelectedStyle
    {
        background: blue;
    }
</style>

<asp:Menu ID="NavigationMenu" DataSourceID="NavigationSiteMapDataSource"
        CssClass="SomeMenuClass"
        StaticMenuStyle-CssClass="StaticMenuStyle"
        StaticMenuItemStyle-CssClass="StaticMenuItemStyle"
        Orientation="Horizontal" 
        MaximumDynamicDisplayLevels="0" 
        runat="server">
</asp:Menu>

.SomeMenuClass
{
    color:Green;
}

.SomeMenuClass a.static.highlighted
{
    color:Red !important;
}

.SomeMenuClass a.static.selected
{
    color:Blue !important;
}

#NavigationMenu a.static.highlighted
{
    background-color:Red;
}

#NavigationMenu a.static.selected
{
    background-color:Blue;
    text-decoration:none;
}

.level2
{
padding: 2px 2px 2px 2px;
}

div.menu ul li a.static.selected
{
    background-color: #bfcbd6 !important;
    color: #465c71 !important;
    text-decoration: none !important;
}

            <asp:Menu ID="mainMenu" runat="server" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
                <StaticMenuStyle CssClass="test" />
                <LevelSubMenuStyles>
                    <asp:SubMenuStyle BackColor="#33CCFF" BorderColor="#FF9999" 
                        Font-Underline="False" />
                    <asp:SubMenuStyle BackColor="#FF99FF" Font-Underline="False" />
                </LevelSubMenuStyles>
                <StaticMenuItemStyle CssClass="main-nav-item" />
            </asp:Menu>

a.selected.static
{
background-color: #f5f5f5 !important;
border-top: Red 1px solid !important;
border-left: Red 1px solid !important;
border-right: Red 1px solid !important;
} 

<asp:Menu ID="mnuMain" Orientation="Horizontal" runat="server" Font-Bold="True" Width="100%" CssClass="mainMenu">
  <Items>
    <asp:MenuItem Text="Home"></asp:MenuItem>
    <asp:MenuItem Text="About Us"></asp:MenuItem>
  </Items>
</asp:Menu>

.mainMenu { background:#900; }
.mainMenu a { color:#fff; }
.mainMenu a:hover { background:#c00; color:#ff9; }