Box behind navs css - html

Question

so I have this navbar in my project, and as it stands at the moment, the text changes color as you hover over it.
jsfiddle of this here
HTML:
<div class = "container">
<div class = "header">
<div class = "header-main">
</div>
<div class = "header-nav">
<ul>
<li><a class = "active" href="#">Home</a></li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
CSS:
* {
padding = 0;
margin = 0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main{
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a.active {
color: #2ecc71;
}
.header-nav ul li a:hover {
color: #3e3e3e;
}
What I'd like to know is how I can add a box that changes color behind (EDIT: and spans the height of the nav) when you hover over it. The best example I can find of this is Windows 10's site

Answer 1

1. Set links to block elements
2. Add padding to the links (not the list items)
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
display: block;
padding: 4px 8px;
}
3. Set background-color to the links
.header-nav ul li a.active {
background-color: #2ecc71;
}
.header-nav ul li a:hover {
background-color: #3e3e3e;
}
4. Clear ul
.header-nav ul:after {
clear: both;
content: "";
display: table;
}
5. ???
6. PROFIT
https://jsfiddle.net/BramVanroy/82n0rwb7/9/
Maybe it looks prettier without the margin on the list items? Like so.
(I just noticed that there was an error in your fiddle's CSS. You set margin = 0 to *, but the designator should be a colon not an equal sign, like so: margin: 0.)

Answer 2

.header-nav ul li a {
display:block;
padding:10px;
color: #737373;
text-decoration: none;
font-size: 18px;
font-family: 'Novecentosanswide-DemiBold';
text-transform: uppercase;
}
.header-nav ul li a:hover {
color: #fff;
background:#000;
padding:10px;
}
Eidting these two style classes will do the trick i think. Check it out.

Answer 3

You have to take control of the element size. You can do the trick with
// apply hover to li instead a
.header-nav ul li:hover {
color: #3e3e3e;
background-color: red;
}
// remove the margins for the ul
.header-nav ul {
margin-top: 0px;
margin-bottom: 0px;
}
// implement the margins of the ul on li but as padding instead of margin
.header-nav ul li {
padding-top: 10px;
padding-bottom: 10px;
}
see fiddle example

Answer 4

Few things which you missed:
Clearing the float
Removing margin,bottom from ul which cause unexpected dimensions.
Adding a padding to the link anchors.
CSS::
* {
padding=0;
margin=0;
}
.container {
margin: 0 auto;
width: 940px;
}
.header-main {
border-bottom: 1px solid #dadada;
padding: 20px 0;
}
.header-nav {
padding: 0 0;
}
.header-nav ul {
list-style: none;
margin:0;
padding:0;
}
.header-nav ul li {
float: left;
margin-right: 20px;
}
.header-nav ul li a {
color: #737373;
text-decoration: none;
font-size: 18px;
font-family:'Novecentosanswide-DemiBold';
text-transform: uppercase;
padding:5px 10px;
}
.header-nav ul li a.active {
color: #2ecc71;
background-color:#BFBFBF;
}
.header-nav ul li a:hover {
color: #3e3e3e;
background-color:#BFBFBF;
}
.header-nav ul:after {
clear:both;
content:"";
display:block;
}
Demo: https://jsfiddle.net/lotusgodkk/82n0rwb7/5/