I have been attempting to modify the background of the list item labeled as home in order to ensure that it displays hover properties even when not being interacted with. Despite specifying this in the class, the appearance does not change.
Below is the HTML code:
<div id="header">
<img id="logo" src="images/logo.jpg">
<ul>
<li> <a href="#">CONTACT</a> </li>
<li> <a href="#">GALLERY</a> </li>
<li> <a href="#">EVENTS</a> </li>
<li> <a href="#" class="currentpage">HOME </a> </li>
</ul>
</div>
This is the CSS script used:
#header ul {
padding-top:1em;
}
#header ul li a.currentpage {
color:white !important;
background-color: #F96E5B !important;
}
#header ul li a {
text-decoration: none;
color:#676767;
font-family: 'Oswald', sans-serif;
font-size: 1em;
float:right;
line-height: 3em;
padding-right: 1em;
padding-left:1em;
}
#header ul li a:hover{
background-color: #F96E5B;
}
You can check out the website at