我正在尝试使链接的整个长度更改背景颜色，但是只有文本后面的背景会更改。
html如下：
<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>
CSS在下面，我尝试更改许多类的填充，但似乎无法获取。
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;
}
更改要附加:hover的内容，它应突出显示整个li元素。
.content li:hover {
background-color: #c4c4c4;
}
尝试更改“ li”的背景颜色，而不是“ a”。您可以使用JQuery
$(".li_class").mouseover(function(){
var color = $(this).css("background-color");
$(this).css("background", "#your color");
$(this).mouseout(function(){
$(this).css("background", color);
}
}