菜单中的绝对链接/相对链接均无效

Question

I'm brushing up my html basics and I'm using a template to practice, here's my question with regards to reveal (uses jquery) menu:

    <ul>
        <li class="home-link"><a href="http://example.com">Home</a></li>
        <li><a href="http://example.com/alpha.html">Alpha</a></li>
        <li><a href="http://example.com/beta.html">Beta</a></li>
    </ul>

When the page is loaded and I click on the links nothing happens, the only one that works is home. In the example they use these type of links instead and they all work properly:

    <ul>
        <li class="home-link"><a href="http://example.com">Home</a></li>
        <li><a href="http://example.com/alpha">Alpha</a></li>
        <li><a href="http://example.com/beta">Beta</a></li>
    </ul>

They seem to be pointing to a folder instead? I've tried everything, relative, absolute, but nothing. Did they change the htaccess file? When I make a link outside of the menu div they work absolutely fine.

Any pointers, tips, hints? Thanks.

Edit: I applied the style to the other links as suggested but it didn't work. What's weird is that if I right-click and open the links they work.

Answer 1

Guessing it's to do with styling as I see you have a class on Home and home seems to be the only one that is working.

Try adding that same class on the other links and see if it works.

Also, if you're using position: absolute on one of the links and it remains unclickable, try adding a higher z-index to it [Not recommended as a permanent fix but rather to find the root of the problem].

CSS-Tricks has an excellent guide to understanding position properties.

Edit: To clarify, add class="home-link" to the other li tags