私は現在、ウェブサイトのナビゲーション バーを作成しようとしています。ページがアクティブなときに、ナビゲーション バーの背景を本文と同じにしたいと考えています。ただし、これを行うと、背景はナビゲーションバーの高さ全体ではなく、テキストのみをラップします。
私の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');
}