display: block on a nav bar (CSS) isn't working like I think it should....?

I am kind of noobish. Just started tonight! Anyway, I have written a CSS page for a navigation bar. I made a div, float to the left and tried to block the href display. On a hover over/activation I wanted the background to change color, along with the font and the font style. Background-color is staying the same, href is still underlined, but DOES italicize and change colors. Can anybody help??

#nav{
   width: 150px;
   float: left;
   margin-top: 12px;
   margin-right: 18px;
}

#content{
   width: 75%;
   float: left;
}

#nav ul{
   list-style: none;
   margin: 12px;
   padding: 0px;
}


#nav li{
   border-bottom:1px solid white;
}

#nav li a:link, #nav li a:visited{
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   background-color: red;
   color: black;
}

#nav li a:hover, #nav li a:active {
   font-style: italic;
   font-size: 10pt;
   font-weight: bold;
   display: block;
   padding: 3px 0px 3px 3px;
   bacground-color: black;
   color: red;
}

edit

<div id="nav">
<ui>
<li><a href="http://www.com">Home</a></li>
<li><a href="pagetwo.html">Scoreboards</a></li>
<li><a href="adver.html">Advertisement Opportunities</a></li>
</ui>
</div>

Solution

Here is a JSFiddle fixing your issue.

You had a typo on background-color: black; and missing text-decoration: none; which removes the underline.