asp:Menu et css de l'élément sélectionné

Je vais avoir des problèmes pour configurer mon asp:Menu. Lorsque j'utilise le css, les éléments de menu ne sont pas sélectionnés plus. J'ai essayé 3 versions, et chacun a ses inconvénient.

Ce un travail la meilleure pour le css, mais l'élément sélectionné n'est pas d'être sélectionné.

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

Cette montre sélectionnée, mais je ne peux pas utiliser les images comme backgound pour les menuitems. Si j'ajoute css en elle, le choix de ne pas montrer non plus. Et le sous-élément est toujours présent.

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

Comment puis-je avoir deux images comme arrière-plan pour mon menuitems, avec du texte, ET montrer de la sorcière de l'élément sélectionné.

Grâce.


Mise à JOUR

Ici est le CSS qui va avec:

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

J'ai aussi essayé de définir ces, mais seul le premier élément reste sélectionné, peu importe wicht un fait est sélectionné

<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>
  • Essayez de nous montrer votre HTML + CSS, pas votre .NET code source.
InformationsquelleAutor GaZ | 2012-11-14