Highlight Active Menu
Part of the CSS Mastery section of Coddy's HTML journey — lesson 39 of 43.
Challenge
EasyA simple navigation menu is given with four links. Your task is to make it more interactive using pseudo-classes.
Write CSS to:
- Change the background color of a link when a user hovers over it to
rgba(50, 168, 82, 1). - Change the text color to white when the link is actively being clicked.
Try it yourself
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
All lessons in CSS Mastery
1Selector Mastery – Combination
IntroductionDescendant SelectorChild SelectorAdjacent Sibling SelectorGeneral Sibling SelectorRecap Challenge3Structural pseudo-classes
Structural pseudo-classesTargeting the First ChildTargeting the Last ChildPattern Power: Using nth-childRecap Challenge6Landing Page
Style the Header SectionStyle the buttonSection Layout Card Layout Add Finishing Touches9Final Challenges
Highlight Active MenuZebra Table RowsButton Hover EffectGrid Card LayoutBlurred Hero Image