Issues with CSS(Small but can't figure it out) - css

Question

My code is the following:
wrapper, wrapper2, content, footer, nav {
display: block;
}
html {
width: 100%;
height:100%;
margin:0;
padding:0;
background-image:url('../images/gdmm.jpg');
font-family: 'TitilliumWeb-ExtraLight';
font-weight:900;
}
body{
margin:0;
}
#font-face {
font-family: 'TitilliumWeb-SemiBold';
src: url('../TTfont/TitilliumWeb-SemiBold.eot');
src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-SemiBold.ttf") format("truetype"); /* non-IE */
font-family: 'TitilliumWeb-ExtraLight';
src: url('../TTfont/TitilliumWeb-ExtraLight.eot');
src: local("Grandesign Regular"), url("../TTfont/TitilliumWeb-ExtraLight.ttf") format("truetype"); /* non-IE */
}
h1 {
font-weight: bold;
font-size: 32px;
margin-left:auto;
border-bottom: 1px dashed rgb(221, 221, 221);
font-weight: 300;
line-height: 1.4;
padding: 2px 25px;
font-family: 'TitilliumWeb-SemiBold';
}
h1, h2, h3, h4, h5, h6 {
font-family: "Titillium Web","Source Sans Pro",Helvetica,Arial,serif;
}
#pagewrap{
width: 100%;
margin: 0 auto;
}
#content{
width:1024px;
height:768px;
border-width:5px;
margin-top:100px;
margin-left:auto;
margin-right:auto;
word-wrap:break-word;
background: rgba(252, 252, 255, 0.8);
overflow:hidden;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
word-wrap:break-word;
}
#contentinner{
width:980px;
height: 600px;
background-color: rgb(252, 252, 255);
margin-top:30px;
margin-left:auto;
margin-right:auto;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);
word-wrap:break-word;
}
#text{
font-size: 1.2rem;
font-weight: 300;
line-height: 1.6;
padding: 5px 10px;
word-wrap:break-word;
}
#navwrapper{
width: 100%;
height:50px;
background-color:#005b96;
padding:0;
text-align: center;
float:none;
margin:0;
text-decoration: none;
}
#navonderwrap{
width: 100%;
height:30px;
background-color:#FFFFFF;
padding:0;
text-align: center;
float:none;
margin:auto;
}
nav{
display: inline-block;
overflow: hidden;
word-spacing: 1em;
text-align: center;
margin:auto;
}
#navonder{
display: inline-block;
overflow: hidden;
word-spacing: 1em;
text-align: center;
margin:auto;
}
nav ul{
margin-right:20px;
padding:0;
width:auto;
}
nav ul li{
display:table-cell;
margin-right:20px;
}
nav li
{
display:inline;
}
nav li a
{
font-family:Arial;
font-size:14px;
float:left;
padding:0px;
border-bottom:1px;
text-decoration: none;
}
nav li a:hover {
display: block;
float: left;
background-color:#FFF;
padding-bottom:10px;
}
My issue is that when you hover on the menu it pushes the entire thing down all I want is it to look as if it has the same color as the one below, I can't figure out why.
Thanks in advance!

Answer 1

this comes from the padding-bottom:10px you apply.
In addition to that you say display the link as a block and you make it float... so you can remove the display:block; it is useless in that case.

Answer 2

In it's default state the <a> has no padding, but in it's hover state it has padding-bottom: 10px;.
In order to make it look like it joins the white bar below, you'll need to add:
nav ul {
margin-bottom: 0; /* to reset the default */
}
nav li a {
font-family: Arial;
font-size: 14px;
float: left;
/* padding: 0px; REMOVE */
padding-bottom: 10px; /* ADD */
border-bottom: 1px;
text-decoration: none;
}
nav li a:hover {
/*display: block; REMOVE (unnecessary) */
/* float: left; REMOVE (because it's already set on default state) */
background-color: #FFF;
/* padding-bottom: 10px; REMOVE (because it's already set on default state */
}

Answer 3

nav li a {
padding: 10px; //Add
}
nav li a:hover {
background-color: #FFFFFF;
display: block;
float: left;
padding-bottom: 10px; /// Remove this
}
Remove padding bottom