我正在尝试制作一个网站导航栏，当页面处于活动状态时，我希望导航栏背景与正文相同。但是，当我这样做时，背景只会环绕文本而不是导航栏的整个高度。
我的 HTML
<div id="navbar">
<ul>
<li><a href="index.html" class="active"> Home</a> </li>
<li><a href="purchase.html">Purchase</a> </li>
<li><a href="contact.php ">Contact</a> </li>
<li><a href="Portfolio.html">Portfolio</a> </li>
</ul>
</div>
我的 CSS
#navbar ul{
list-style:none;
margin:0;
background-image:url('Images/black.png');
text-align:center;
height:60px;
}
#navbar ul{
list-style-type:none;
text-align:center;
color:#fff;
}
#navbar ul li{
display:inline;
}
#navbar ul li a{
color:#36b6f4;
text-decoration:none;
font-size:30px;
margin:30px;
}
#navbar ul li a.active{
height:60px;
background-image:url('Images/background.jpg');
}