HTML | CSS |垂直サブメニューはテキストの周りクリックできない

Question

私は私の問題を表現するために作成したこのJSFiddleは、外部ソースにも同様にブートストラップ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> 

、私はサブメニューの項目にマウスを置くと、それは同様にテキストの周りのスペースでクリック可能でなければならないので、私は何を変更すべきですか？助けてください。

Answer 1

あなたはただ、私はあなたがbootstrap.min.jsを追加したことがわかり

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

Codeply Demo