Try it like this:
ul li {
display: block;
overflow: hidden;
margin-bottom: 6px;
}
ul a {
display: block;
float: left;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
padding: 10px 30px 10px 10px;
background-image: url(../academy-images/arrow-black.gif);
background-repeat: no-repeat;
background-position: right center;
}
ul a:hover {
padding-right: 40px;
}
You should be able to lose those BR's then.
Also, I would include the id of the containing div i.e.
#nav ul a {...}
otherwise if you use a list elsewhere it'll end up being styled like your navigation.