I am sure that I am doing something wrong. I have done this before, applied Css to each level in a menu and set the hoverstyle class with a background image and it all worked without a hitch. This time in the project I am working on the backgound: url(img/bg.jg); style is being applied to the level item but also to the anchor itself.
<
div class="menu">
<asp:Menu ID="MainNavigation" runat="server" DataSourceID="SiteMapDSMain" Orientation="Horizontal"
StaticDisplayLevels="2">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1" />
<asp:MenuItemStyle CssClass="level2" />
</LevelMenuItemStyles>
<StaticMenuStyle CssClass="level1" />
<StaticMenuItemStyle CssClass="item" ItemSpacing="0" />
<StaticHoverStyle CssClass="hoverstyle"/>
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDSMain" runat="server" />
</
div>
And the basic css that goes with it:
.menu
{
width: 770px;
height:28px;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 12px;
font-variant: small-caps;
border: none;
background: url(imgs/stripes_small.gif) top left repeat-x;
text-align:left;
}
.level1
{
padding: 0;
margin: 0;
border: none;
width: 78px;
height:28px;
color: #fff;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
.level2
{
padding: 0;
margin: 0;
border: none;
width: 78px;
color: #fff;
text-decoration: none;
text-align: center;
vertical-align: middle;
}
.hoverstyle
{
color: #fff;
background: url(imgs/red.jpg);
}
Can anyone tell me where I am going wrong on this? I apologize but CSS is not really my strongest aspect.