Question

I am having problems configuring my asp:Menu. When I use any css, the menu items don’t get selected anymore. I’ve tried 3 versions, and each has it’s drawback.

This one work the best for css, but the selected item doesn’t get selected.

<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>

This one shows selected, but I can’t use images as backgound for the menuitems. If I add css in it, the selection won’t show anymore. And the sub-item is always present.

<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>

How can I have both: images as background for my menuitems, with text over it, AND show witch item is selected.

Thanks.

---

UPDATE

Here is the CSS that goes with it:

.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;
}

I also tried to set these, but only the first item stays selected, no matter wicht one actually is selected

<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>

Answer 1

If you run your .aspx page and examine the source you will notice that the menu item <a> (hyperlink) tag has a selected class called a.selected.static you can implement your own version of this in your code and override it by applying !important to the CSS class.

The sample below displays a simple menu with image menu items and highlights the image with a red border when selected:

<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>