Hello. I’m trying to create a horizontal navigation menu in blocks. When hovering the menu, I’d like for the text and background to change. However, it is only the text that changes color. What am I missing? Thank you.
**The HTML **
<!doctype html>
<html>
<head>
<title>Nothing yet</title>
<meta charset="utf-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="base2.css">
</head>
<body>
<nav>
<ul>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Learning</li></a>
<a href="#"><li>Projects</li></a>
<a href="#"><li>Work</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</nav>
</body>
</html>
The CSS
@charset "utf-8";
/* CSS Document */
body {
font-family: helvetica, lato, sans-serif;
background-color: #E9E9E9;
}
nav {
background-color: #008cff;
height: 50px;
}
nav ul {
height: 50;
width: 600px;
margin: auto;
}
nav ul li {
list-style-type: none;
width: 100px;
float: left;
text-align: center;
font-size: 1.2em;
}
nav a {
text-decoration: none;
color: #ECECEC;
line-height: 50px;
display: block;
}
nav a:hover {
color: white;
background-color: red;
}