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

Question

I have this JSFiddle created to represent my issue, added bootstrap css as well in external source:

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

Right now vertical sub-menu is clickable only on the text, What change should I do so that when I hover on the sub-menu items it should be clickable on the space around text as well? Please help.

Answer 1

You just need to add the CSS for padding the sub menus..

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

Codeply Demo