Asp Menu Item- styling

[amyw_ftdna]

I have a few issues that I am trying to over come with the asp menu control. The main thing I am working on now is... Whenever you click on the menuItem a pink line appears around the MenuItem then goes away once the new page comes up. I've seen this where and image is a link but is usually fixed by setting the border: none;

Sort of stumped here.. any advice is appreciated.

code follows

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="/dashboard.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="/about.aspx" Text="About" />
<asp:MenuItem NavigateUrl="/profile.aspx" Text="My Profile" >
<asp:MenuItem NavigateUrl="/editMyProfile.aspx" Text="Edit My Profile" />
<asp:MenuItem NavigateUrl="/profileSettings.aspx" Text="Profile Settings" />
<asp:MenuItem NavigateUrl="/personalSettings.aspx" Text="Personal Settings" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/results.aspx" Text="Results">
<asp:MenuItem NavigateUrl="/matches.aspx" Text="Matches" />
<asp:MenuItem NavigateUrl="/ancestralOrigins.aspx" Text="Ancestral Origins" />
<asp:MenuItem NavigateUrl="/haplogroupOrigins.aspx" Text="Haplogroup Origins" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/maps.aspx" Text="Maps" >
<asp:MenuItem NavigateUrl="/matchesMaps.aspx" Text="Matches Map" />
<asp:MenuItem NavigateUrl="/migrationMaps.aspx" Text="Migration Map" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Resources">
<asp:MenuItem NavigateUrl="/haplotree.aspx" Text="Haplo Tree" />
<asp:MenuItem NavigateUrl="/resources.aspx" Text="Research Paper" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="/contributors.aspx" Text="Contributors" />
<asp:MenuItem NavigateUrl="/default.aspx" Text="LOGOUT" />
</Items>
</asp:Menu>


THANX

 

[JohnH]

The menu items renders as anchors (A tag), which you can style with anchor pseudo-classes, see for example CSS Pseudo-classes
If you see border now it must mean you current css styles is doing it, because that is not the default anchor style.

 

[amyw_ftdna]

Actually the following contains my styles...

div.menu
{
margin: 0px;
padding: 0px 0px 4px 1px;
<%--width: 940px;--%>
height: 40px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul.static
{
<%--display: block;--%>
<%--width: 940px;--%>
}
div.menu ul.static li.static a.static, div.menu ul.static li.static a.static:visited
{

background-image: url(../img/navBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
border-right: 1px solid <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 33px 0px 32px;
text-decoration: none;
white-space: nowrap;
height: 40px;
}
div.menu ul.static li.static a.static:hover
{
background-color: <%= Main[2]%>;
color: <%= Common[2]%>;
text-decoration: none;
}
div.menu ul.static li.static a.static:active
{
background-color: <%= Main[3]%>;
color: <%= Common[3]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic a.dynamic, div.menu ul.dynamic li.dynamic a.dynamic:visited
{
background-image: none;
background-color: <%= Accent[0]%>;
color:<%= Common[3]%>;
font-size: 14px;
display: block;
padding: 8px 4px 0px 4px;
text-decoration: none;
white-space: nowrap;
height: 20px;
width: 121px;

}
div.menu ul.dynamic li.dynamic a.dynamic:hover
{
color: <%= Main[2]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic a.dynamic:active
{
background-color: <%= Accent[0]%>;
color: <%= Common[3]%>;
text-decoration: none;
}
div.menu ul.dynamic li.dynamic:last a.dynamic, div.menu ul.dynamic li.dynamic:last a.dynamic:visited
{

background-image: url(../img/footBG.png);
background-repeat: repeat-x;
background-color: <%= Accent[0]%>;
}

 

[amyw_ftdna]

Color definitions

Page.Response.ContentType = "text/css";


Main.Add("#486901");
Main.Add("#618c03");
Main.Add("#74a609");
Main.Add("#a8bf75");


Accent.Add("#023b58");
Accent.Add("#016698");
Accent.Add("#0185c7");

Common.Add("#000000");
Common.Add("#363636");
Common.Add("#333333");
Common.Add("#ffffff");