Question

Recently I have been learning ASP.NET. I have ran into a slight difficulty which I cannot fix nor find a solution to after hours of trial and error/searching. Now you know I’m not wasting your time, here’s the information!

I have created a bog-standard Menu in ASP.NET. It simply has four normal links from a normal Web.Sitemap file. I have styled it by referring to its ID via an external style sheet. Everything has been styled normally, EXCEPT an ugly orange border, which appears when a link is clicked on. I believe it is therefore :active when it has the orange border. So how do I remove this orange border?

Here is the relevant code:

In the MasterPage

<div id="Menu">
            <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" 
                Orientation="Horizontal">
            </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="False" />
        </div>

From the external stylesheet:

#Menu
{
    height:20px;
    width: 780px;
    font-size: 20px;
}

#Menu ul li
{
    text-align: center;
    width: 195px;
    background-color: #FFFFFF;
    display: block;
}

I have tried several different solutions which I would love to list to save your time, but I have probably forgotten the majority of them. Anyway… I could be making some stupid mistake which you will find immediately!

If you need more information then I will share whatever code, this is just a project I’m putting together for a few friends.

Many thanks for your time,
JDWebs.

Answer 1

What if you try the following?

#Menu ul li a, 
#Menu ul li a:active {outline:none;}