This code
#menu a:hover
{
text-decoration: underline;
background: #000;
}
means that your background-color is black on hover, not white. The font color is white from #menu a
Change to this:-
#menu a:hover
{
text-decoration: underline;
background: transparent;/*#000;*/
}
and hover should be transparent.
If you put the black background on the #menu a style like this:-
#menu a { background: #000;
display: block;
float: left;
margin-right: 17px;
padding: 5px 12px;
text-decoration: none;
font: 14px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
}
you will have a black background with white font normally, then transparent with white font on hover.
Your #menu style is height: 51px; but your #menu ul style has padding: 50px 0 0 10px; which has top padding 50px and puts the link below the menu div, so edit 50px to 0 if you want it to be inside.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.