Search code examples
htmlcssmenusubmenuclickable

HTML / CSS - Menu not clickable if submenu is displayed

The following menu works fine. But as soon as I add the sub-menu then the menu items are not click-able any more (only the sub-menu items).

<div id="menu">
  <ul> 
    <li>
        <a href="site.php?page=home" class="active" > Home </a>
        <ul> 
            <li><a href="site.php?page=Account%20Summary" >Account Summary</a></li>
            <li><a href="site.php?page=Total%20Transaction" >Total Transaction</a></li>
            <li><a href="site.php?page=Claim%20Points" >Claim Points</a></li>
            <li><a href="site.php?page=Redeem%20Points" >Redeem Points</a></li>
            <li><a href="site.php?page=Profile" >Profile</a></li>
        </ul></li>    
    <li><a href="site.php?page=about" >         About Us    </a></li>
    <li><a href="site.php?page=restaurants" >   Restaurants </a></li>
    <li><a href="site.php?page=howItWorks" >    How It Works    </a></li>
    <li><a href="site.php?page=contact" >           Contact     </a></li>
  </ul>
</div>

Any suggestions on how to make the menu click-able even when the submenu is displayed?

Note: The sub-menu is only displayed if the user is logged in.

Solution

  • I fixed this with the help of Jon Hanna's comment:

    I made a border around the elements in the menu. The I saw the overlay and fixed it changing my CSS.