How do i make the entire background of the link change when scrolled over rather than just the text?

I'm trying to make it so the entire length of the link changes background color however only the background behind the text does.

The html is below:

<DOCTYPE! HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="dropdwn.css">
</head>

</body>

    <div class="dropdown">
        <h1><a href="#">Dropdown Box</a></h1>

            <ul class="content">
                <li><a href="#">List Item</a></li>
                <li><a href="#">List Item</a></li>
                <li><a href="#">List Item</a></li>
            </ul>

    </div>

</body>
</html>

The CSS is below, I have tried changing the padding on many classes but cant seem to get it.

body {
}

.dropdown {
    position: absolute;

}

.dropdown h1 {
    background-color: #62dbfc;
    font-family: "calibri light";
    padding: 15px 35px;
    margin: 0 auto;
    font-size: 36px;

}
.content {
    display: none;

}

.dropdown ul {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    padding-left: 0;
}

.dropdown li {
    list-style-type: none;
    background-color: #ededed;
    margin: 0 auto;
    font-family: calibri;
    text-align: center;
    padding: 15px 0px;

}

.dropdown a {
    text-decoration: none;
    color: black;
    font-size: 36px;

}

.dropdown:hover .content {
    display: block;
}

.content a:hover {
    background-color: #c4c4c4; 

}

Solution

Change what you are attaching your :hover to and it should highlight the entire li element.

.content li:hover {
    background-color: #c4c4c4; 

}