Question

I’m trying to put an a:hover over an menu that i created. If you could help me I really appreciate it! What im trying to achieve is to get the black in the whole bar. If you know what I mean.

Here is the menu: (The black is hover)

So here is my CSS for the menu:

#navigation {
padding: 5px;
height: 1em;
width: auto;
text-align: center;
font-family: Verdana;
font-size: 12px;
text-transform: uppercase;
margin-top: -5px;
}

#navigation ul {
background-color: #fff;
width: 1000px;
margin-left: -5px;
}

#navigation li {
float: left;
list-style: none;
width: 100px;
background-color: #fff;
padding: 10px;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.235), 0px 0px 5px rgba(0, 0, 0, 0.047);
}

#navigation li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}

#navigation li a:hover {
background-color: #000;
padding:10px;
width: 300px;
color: #fff;
position:absolute;
}

#navigation a { 
color: #000;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

#navigation a:link {    
color: #000;
}

#navigation a:hover {   
color: #fff;
background-color: #000;
}

#navigation a:visited { 
color: #000;
}

So if you need more information about this, just visit my Website where you can see the issue yourself. http://tomaswebdesign.com

Answer 1

You’ve got two options, the first is the simplest, simply add the :hover to the li itself:

li:hover,
a:hover  {
    color: #fff;
    background-color: #000;
}

JS Fiddle demo. For the above solution, I’d also suggest (as is included in the linked-demo) that you set color: inherit on the a element (not under a:hover)

The second is to style the a as a block element:

a {
    display: block; /* to fill the available horizontal space */
    height: 100%; /* to fill the available vertical space */
}

This does require that you remove the padding from the li element though, as that’s what’s ‘forcing’ the background-color away from the edge of the element, so:

li {
    padding: 0;
}

li a {
    padding: 10px; /* so that the padding is preserved, albeit
                      on the a element instead */
    display: block; 
    height: 100%; 
}

JS Fiddle demo.