Click on Anchor <a> Searches for a page in duplicate nested hierarchy which does not exist

Question

I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.

<div id="menu">
    <ul class="menu">
        <li><a href="" class="parent"><span>About Us</span></a>
            <div>
                <ul>
                    <li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
                    <li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>

                </ul>
            </div>
        </li>
        </ul>
        </div>

Answer 1

The problem is because you are using relative paths to your pages.

It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.

You need to add a / to the beginning of your URL to make it relative to the root of the site:

<ul>
    <li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
    <li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>

Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:

<ul>
    <li><a href="<%= ResolveUrl("~/Pages/Contact/Phone.aspx") %>"><span>Phone</span></a></li>
    <li><a href="<%= ResolveUrl("~/Pages/Contact/Email.aspx") %>"><span>Email</span></a></li>
</ul>

Answer 2

I believe href="" is your problem here.

Try href="#" or href="javascript:;"