Selected menu Highlight ASP.Net Web Forms - css

Question

I have this code on my TruckData page:
<!-- BEGIN SIDEBAR -->
<div class="left side-menu" style="background: #99CCFF">
<div class="body rows scroll-y" style="background: #99CCFF; margin-top: 50px; padding-top: 40px">
<!-- Sidebar menu -->
<div id="sidebar-menu">
<ul>
<li>
<asp:HyperLink ID="hyperlink_TruckData" runat="server" Text="Truck Data" NavigateUrl="~/View/TruckData.aspx" Font-Underline="false" style="font-size: 18px; color: black">
<i class="glyphicon glyphicon-info-sign" style="color:black; background: #E8D73E"></i>
Truck Data</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="hyperlink_MaintenanceRecord" runat="server" NavigateUrl="~/View/MaintenanceRecord.aspx" Font-Underline="false" style="font-size: 18px; color: black">
<i class="glyphicon glyphicon-info-sign" style="color:black"> </i>
Maintenance Record</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="hyperlink_MaintenanceSchedule" runat="server" Text="Maintenance Schedule" NavigateUrl="~/View/MaintenanceSchedule.aspx" Font-Underline="false" style="font-size: 18px; color: black">
<i class="glyphicon glyphicon-calendar" style="color:black"> </i>
Maintenance Schedule </asp:HyperLink>
</li>
<li>
<asp:hyperlink id="hyperlink_Inspection" runat="server" text="inspection" navigateurl="~/view/inspection.aspx" font-underline="false" style="font-size: 18px; color: black">
<i class="glyphicon glyphicon-calendar" style="color:black"></i>
Inspection </asp:hyperlink>
</li>
</ul>
</div><!-- End div #sidebar-menu -->
</div><!-- End div .body .rows .scroll-y -->
</div>
<!-- END SIDEBAR -->
And this is my CSS:
.row a:hover {
background-color: #6699FF;
}
.row a:active {
background-color: #;
}
.row a:visited {
background-color: #;
}
.row a:selected {
background-color: #63D130;
}
This is the output:
On the picture, only the glyphicon is highlighted. I want to highlight the whole. How can I highlight the whole Truck Data menu? In normal HTML it worked, but in ASP.Net, only the icon is highlighted.