Different lengths rows with same length background color

Question

I can't really solve a problem. I have some lines with different options in a list, and I want a background color on them as cursor hovers. But I want it to be the same length in every row, so the background color starts and ends in the same distance horizontally. Sadly, now it lasts only to the end of the text.

Here is the demo

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 you.

Answer 1

Add display:block to your #leftcol1 ul li a which is an inline element.

#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 {
    display: block;<!--Added-->
    list-style-type:none;
    color:black;
    text-decoration:none;
}
#leftcol1Wrapper a:hover {
    background-color:darkgray;
    width: 200px;
    min-width: 200px;
    max-width:200px;
}

DEMO

NOTE: display:block to <a> will help to inherit the width of its parent.

Answer 2

The way I would do this is to add the :hover style to the <li> and set a width on your <ul>.

I have updated your jsFiddle with an example: http://jsfiddle.net/nmvwu4v7/3/

Here is the updated CSS:

#leftcol1 ul li {
    left: 0px;
    top: 30px;
    position: relative;
    /* removed margin: 0 auto; so it would not center with the width provided below */
    list-style-type: none;
    text-decoration:none;
    color:black;
    list-style-type:none;
    font-family:Arial;
    line-height: 20px;
    display:block;
    white-space:nowrap;
    width: 200px; /* new */
}
#leftcol1 ul li a{
    list-style-type:none;
    color:black;
    text-decoration:none;
}
#leftcol1Wrapper li:hover { /* was #leftcol1Wrapper a:hover */
    background-color:darkgray;
}