Sak Sak - 1 month ago 15x
CSS Question

HTML| CSS | vertical sub-menu is not clickable around the text

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>
<li><a runat="server" href="~/Configuration.aspx?page=1">CLIENT/PROGRAM/POSITION CODE GROUPING</a></li>
<li><a runat="server" href="~/Configuration.aspx?page=2">STATUS INDICATOR GROUPING</a></li>
<li><a runat="server" href="~/Configuration.aspx?page=3">REASON CODE/REASON CODE ACTION GROUPING</a></li>
<li><a runat="server" href="~/Configuration.aspx?page=4">CHANGE INITIATOR GROUPING</a></li>
<li><a runat="server" href="~/Configuration.aspx?page=5">BILLING USER GROUPING</a></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>

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.

enter image description here
enter image description here


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

.navbar li>a {
    display: block;

Codeply Demo