Different string lengths with the same background color

I cannot solve the problem. I have several lines with different options in a list box and I want to have a background color on them when the cursor hovers. But I want it to be the same length on each line, so the background color starts and ends at the same horizontal distance. Unfortunately, now this only continues until the end of the text.

Here is a demon

CSS

#leftcol1 ul li{
left: 0px;
top: 30px;
position: relative;
margin: 0px auto;
list-style-type: none;
text-decoration:none;
color:black;
list-style-type:none;
font-family:Arial;
line-height: 20px;
display:block;
white-space:nowrap; }

#leftcol1 ul li a{
list-style-type:none;
color:black;
text-decoration:none; }

#leftcol1Wrapper a:hover{
background-color:darkgray;
width: 200px;
min-width: 200px;
max-width:200px; }

      

        
        
        
      

    

Html

        <div id="leftcol1">
        <ul  id="leftcol1Wrapper">
            <li><a href="#" id="person"> </a></li>
            <li><a href="#"> Üzenetek </a></li>
            <li><a href="#"> Értékeléseim</a></li>
            <li><a href="#"> Kérdéseim</a></li>
            <li><a href="#"> Exklúzív értékelések</a></li>
            <li><a href="#"> Válaszok</a></li>
            <li><a href="#"> Értesítések</a></li>
        </ul>
    </div>

      

        
        
        
      

    

Thank.