CSS nav li a:hover not aligning.

I'm just starting out playing with css, making a wordpress theme.

I've set up my nav bar, and I want it to change colour when I hover the mouse over it. When It does, but it isn't aligned correctly. I'm sure i'm just missing something pretty simple.

this is the css I have


#nav {
border-bottom:1px solid #eee;

margin:0;
border-top:1px solid #eee;
height:45px;

padding: 20px 5px 0px 5px ;
background: #333333; /* old browsers */
background: -moz-linear-gradient(top, #A8A8A8 0%, #4F4F4F 50%, #232323 51%, #A8A8A8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8A8A8), color-stop(50%,#4F4F4F), color-stop(51%,#232323), color-stop(100%,#A8A8A8));
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A8A8A8', endColorstr='#4f4f4f',GradientType=0 );
background: -o-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* IE10+ */
background: linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* W3C */
text-align: left;
}


#nav li {
float:left;
list-style:none;
}

#nav li a {
color:#999;
padding:0px 5px 0px 5px;
font:1.6em Trebuchet MS;
text-decoration:none;
display:block;


}
#nav li a:hover {
/*

*/
color:#999;
padding: 20px 5px 0px 5px ;
font:1.6em Trebuchet MS;
text-decoration:none;
display:block;
height:45px;

background: #333333; /* old browsers */
background: -moz-linear-gradient(top, #C9DBFF 0%, #99BAFF 50%, #5E91FC 51%, #C9DBFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C9DBFF), color-stop(50%,#99BAFF), color-stop(51%,#5E91FC), color-stop(100%,#C9DBFF));
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9DBFF', endColorstr='#99BAFF',GradientType=0 );
background: -o-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* IE10+ */
background: linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* W3C */
text-align: left;
}



which results in this

http://i.imgur.com/TulOL.png

if anyone can point me the right direction I would be most appreciative.

You're increasing the top padding on the :hover:

#nav li a {
color:#999;
padding:0px 5px 0px 5px;
font:1.6em Trebuchet MS;
text-decoration:none;
display:block;
}
#nav li a:hover {
color:#999;
padding: 20px 5px 0px 5px ;
...
}[/CODE]

Thanks SB65, I tried that but It still seems lower than It should be.

http://i.imgur.com/YEaYI.png

I was reading that I might need to reset my <ul> tags, but I'm not sure how to do that.

Can we have a link to your page?

It's because of the 20px top padding on the ul element. Have a try making your css:

#nav {
border-bottom:1px solid #eee;
margin:0;
border-top:1px solid #eee;
height:45px;
padding: 0 5px 0px 5px ;
background: #333333; /* old browsers */
background: -moz-linear-gradient(top, #A8A8A8 0%, #4F4F4F 50%, #232323 51%, #A8A8A8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A8A8A8), color-stop(50%,#4F4F4F), color-stop(51%,#232323), color-stop(100%,#A8A8A8));
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A8A8A8', endColorstr='#4f4f4f',GradientType=0 );
background: -o-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* IE10+ */
background: linear-gradient(top, #A8A8A8 0%,#4F4F4F 50%,#232323 51%,#A8A8A8 100%); /* W3C */
text-align: left;
}
#nav li {
float:left;
list-style:none;
}

#nav li a {
color:#999;
padding:0px 5px 0px 5px;
font:1.6em Trebuchet MS;
text-decoration:none;
display:block;
line-height:45px; /* will centre the text vertically*/
}
#nav li a:hover {
background: #333333; /* old browsers */
background: -moz-linear-gradient(top, #C9DBFF 0%, #99BAFF 50%, #5E91FC 51%, #C9DBFF 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C9DBFF), color-stop(50%,#99BAFF), color-stop(51%,#5E91FC), color-stop(100%,#C9DBFF));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9DBFF', endColorstr='#99BAFF',GradientType=0 );
background: -o-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* IE10+ */
background: linear-gradient(top, #C9DBFF 0%,#99BAFF 50%,#5E91FC 51%,#C9DBFF 100%); /* W3C */
}

If that makes the whole menu too small vertically adjust the line-height on #nav li a and the height on #nav

Thanks guys, forgive my noob-ness. I just can't my head around it.

Here is a link to that page.

http://westpcrepair.com/

Yes, if you just replace the relevant bits of your css with the version in my previous post it should be OK I think.
(Beautiful part of Ireland you're in, by the way...)

I've added


line-height:45px; /* will centre the text vertically*/


to #nav li a

and it looks like this now.

http://i.imgur.com/aPZxe.png

Thanks, it's actually warm here today and yesterday. was like living in a monsoon the few days before that :P

Sorry,didn't make it clear. Copy the whole of the css in my post and use that instead of what you've got now.

Thanks SB65!

I see you got it working, good job!
Just a thought I would change the text color to white when hovered. I find it difficult to read once hovered.