color box hover css html

i try to apply hover on box .. means when i drag mouse over menu items then background color must be change so for that i try this code please check

i try this

<div class="lefttabs" style="width: 187px; height: 422px;">
<ul>
<li>
<a>DASHBOARD</a>

</li>
<li>
<a> EVENTS</a>
</li>


.lefttabs a {

    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-size:medium;
    color:White;
    width: 133px;
    margin-left: 0px;

}
.lefttabs ul
{
    list-style:none;
    margin:0px 20px 0px 0px;


 }
.lefttabs li
{
    list-style:none;
   padding: 0px 0px 30px 0px;

 }
 .lefttabs li  a 
{
    list-style:none;
    display:block;


 } 
.lefttabs a:hover,.offcanvas a:focus
{
 color: green;
 background-color:White;
 border-color: Yellow;
 color:#000!important;
 height:20%;
 width:10px;
 }

check image image

in that image i hover box but this not completely fill whereas i draw box with white color so i want to fill that box through hover any solution?

You have to display your padding to your a tag and not to your li tag.

.lefttabs li
{
   list-style:none;
}

.lefttabs li  a 
{
    list-style:none;
    display:block;
    padding: 0px 0px 30px 0px;
}