I am facing an issue with media queries where when I apply a hover effect to an element, such as a clickable link in the navigation bar, the new rules work as expected but also retain the default browser styles.
For instance:
nav ul li a:hover{
border:0;
background-color:green;
color:yellow;
border-radius: 26px;
padding: 60px 10px;
}
@media screen and (max-width: 700px) {
nav ul li:hover{
background-color: black;
width: 100%;
border-radius: 20px;
}
}
Here is the outcome:
The issue is that the styles from both rules are being combined, whereas I only want the links in the navigation bar to apply the @media rule when the browser width is less than 700px. Any assistance would be highly appreciated!