I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Our Products</a></li>
<li><a href="aboutus.html">Contact us</a></li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments