asked on

Menu Control CSS background within background help!

I have created a menu using the built-in menu control. I setup a skin and a style sheet.

On my sub menu, my menu background displays fine, but the text itself also has a mini version of the background. So I have a background within a background with the text inside the inner background.

Help me get rid of the background behind the text. I only want the actual sub menu background.

<asp:Menu ID="menu1" SkinID="menuskin1" runat="server" DataSourceID="SiteMapDataSource1">
</asp:Menu>

<asp:Menu runat="server" SkinID="menuskin1" DynamicEnableDefaultPopOutImage="false"
StaticEnableDefaultPopOutImage="false" Orientation="Horizontal"
MaximumDynamicDisplayLevels="2" StaticDisplayLevels="2">
<StaticMenuItemStyle CssClass="menua" HorizontalPadding="8px"
ItemSpacing="0px" Height="30px" />
<DynamicMenuItemStyle CssClass="menub" HorizontalPadding="8px"
Height="30px" />
<DynamicMenuStyle HorizontalPadding="0px" />
<StaticHoverStyle Height="30px" />
<DynamicHoverStyle Height="30px" />
</asp:Menu>

.menub
{
font-size: 13px;
background-image: url(menubg.gif);
color: #FFFFFF;
font-family: Verdana;
text-decoration: none;
font-weight: Bold;
text-align: left;
border: 0;
padding: 1;
}

.menub a:visited, .nav a:visited
{
color: #FFFFFF;
text-decoration: none;
}

.menub a:hover
{
color: #c7cfeb;
text-decoration: none;
}

ASKER CERTIFIED SOLUTION

VirusMinus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Starr Duskk

ASKER

That works for the visited and hovers, but what about the unvisited? how do i get it to go away for that?
thanks!

Starr Duskk

ASKER

figured it out. needed to add a:link

thanks!

Starr Duskk

ASKER

I added a:link like so:

.menub a:link, a:visited
{
color: #FFFFFF;
text-decoration: none;
background:none !important;
}

And it caused all my other hyperlink background images to disappear. I even added important there....

.Logo
{
display: block;
width: 227px;
height: 75px;
background: url(logo.gif) !important;
}

It is called like this:
<a href="<%= ResolveClientUrl("default.aspx")%>" class="Logo"></a>

How do I fix that please?

VirusMinus

ok... what you need to do is to give the links that don't need backgrounds a class. like this:

<a class="nobg" href="#">link</a>

then alter the styles above as follows:

.menub a.nobg:visited, .nav a.nobg:visited
{
color: #FFFFFF;
text-decoration: none;
background:none !important;
}

.menub a.nobg:hover
{
color: #c7cfeb;
text-decoration: none;
background:none !important;
}

Starr Duskk

ASKER

thanks so much! that worked!