HTML | CSS |垂直子菜单不能在文本周围单击

我创建了这个来表示我的问题，并在外部源代码中添加了引导css：

<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-left" id="menusite">
    <li><a id="A1" runat="server" href="~/Admin" title="Admin">ADMIN</a></li>
    <li class="sub"> <a id="A2" runat="server" href="~/Configuration" title="Configuration">CONFIGURATION</a>
      <ul>
        <li><a runat="server" href="~/Configuration.aspx?page=1">CLIENT/PROGRAM/POSITION CODE GROUPING</a></li>
        <hr/>
        <li><a runat="server" href="~/Configuration.aspx?page=2">STATUS INDICATOR GROUPING</a></li>
        <hr/>
        <li><a runat="server" href="~/Configuration.aspx?page=3">REASON CODE/REASON CODE ACTION GROUPING</a></li>
        <hr/>
        <li><a runat="server" href="~/Configuration.aspx?page=4">CHANGE INITIATOR GROUPING</a></li>
        <hr/>
        <li><a runat="server" href="~/Configuration.aspx?page=5">BILLING USER GROUPING</a></li>
      </ul>
    </li>
    <li><a id="A3" runat="server" href="~/Reports" title="Reports">REPORTS</a></li>
    <li><a id="A4" runat="server" href="~/Upload" title="Upload">UPLOAD</a></li>
    <li><a id="A5" runat="server" href="~/Billing" title="Billing">BILLING</a></li>
  </ul>
</div>

现在垂直子菜单只能在文本上单击，我应该做什么更改，以便当我在子菜单项上悬停时，它也可以在文本周围的空间上单击？请帮忙

---

您只需要添加CSS来填充子菜单

.navbar li>a {
    display: block;
    padding:15px;
    line-height:20px;
}

---

您只需要添加CSS来填充子菜单

.navbar li>a {
    display: block;
    padding:15px;
    line-height:20px;
}

---

我看到您添加了bootstrap.min.js，但没有添加jquery。不过没有工作。对不起，还在学习，谢谢。但它不起作用。我看到您添加了bootstrap.min.js，但没有添加jquery。不过没有工作。对不起，还在学习，谢谢。但它不起作用。谢谢这就是我需要的。谢谢。这就是我需要的。