HTML / CSS-如果显示子菜单，菜单将无法单击

Question

以下菜单工作正常。 但是，一旦我添加了子菜单，那么菜单项将不再可单击（只能是子菜单项）。

<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>

关于即使显示子菜单也如何使菜单可单击的任何建议？

注意：仅在用户登录后才显示子菜单。

Answer 1

我借助乔恩·汉纳（Jon Hanna）的评论修正了此问题：

我在菜单中的元素周围做了一个边框。 我看到了覆盖层并修复了更改我的CSS的问题。