background color not filling styled horizontal list item

Question

I've set up the following CSS. Everything looks fine except for one thing. When I roll over the links in the nav, the entire "button" is filled with the background color, whereas when I rollover the links in the footer, only the the are behind the text is filled. How do I resolve this so that the entire "button" is filled in the footer, preferably without resort to classes and images (meaning, leverage HTML5/CSS3 as much as possible)?

i've looked at this via multiple web browsers. i am guessing it is because the list items are displayed inline, but i don't know the solution.

--- CSS ---

@CHARSET "UTF-8";

* {
margin: 0;
padding: 0;
}

html * {
    margin: 0;
    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */

body {
    background: #fff;
    color: #333;
    font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
    font-size: 62.5%;
    margin: 0 auto;
    width: 960px;
}

header {
    background-color: #999;
    border: 1px solid #999;
    border-radius: 25px;
    margin-top: .5em;
}

header h1 {
    color: #fff;
    font-weight: bold;
    font-size: 2.4em;
    margin: .8em 0 .3em 0;
    text-align: center;
}

nav {
    margin: 1em 30em;
    padding: .8em 1.2em;
}

nav ul {
    padding-left: 1.5em;
    list-style: none;
}
nav ul li {
}
nav ul a {
    display: block;
    text-decoration: none;
}
nav ul li a {
    background-color: #FFF;
    border: 1px solid #999;
    border-radius: 25px;
    color: #222;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 12px 10px;
    text-align: center;
    text-decoration: none;
}
nav ul a:hover {
    color: #333;
    background: #ccc;
}

nav#baseball {
    display: none;
}
nav#football {
    display: none;
}

footer {
    border-top: 1px solid #ccc;
    margin-top: .5em;
    margin-bottom: 1em;
    padding: .8em 1.2em;
}

footer ul {
    list-style: none;
    text-align: center;
}

footer ul li { 
    border: 1px solid #999;
    border-radius: 25px;
    display: inline; 
    margin: 0.0em 1.0em 0.0em 1.0em;
    padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/*    display: block; */
    text-decoration: none;
}
footer ul li a {
    color: #222;
}
footer ul a:hover {
    color: #333;
    background: #ccc;
}

--- HTML ---

<header>
    <h1>Sports Fan</h1>
</header>

<nav id='sports'>
    <ul>
        <li><a href="about-temp.html">Baseball</a>
        </li>
        <li><a href="blog-temp.html">Basketball</a>
        </li>
        <li><a href="consulting-clinic-temp.html">Football</a>
        </li>
        <li><a href="contact.html">Hockey</a>
        </li>
        <li><a href="contact.html">Soccer</a>
        </li>
    </ul>
</nav>

<nav id='baseball'>
    <ul>
        <li><a href="homerun.html">Homerun</a>
        </li>
        <li><a href="bighit.html">Big Hit</a>
        </li>
        <li><a href="doubleplay.html">Double Play</a>
        </li>
        <li><a href="doubleplay.html">Bad Call</a>
        </li>
    </ul>
</nav>

<nav id='football'>
    <ul>
        <li><a href="about-temp.html">Touchdown</a>
        </li>
        <li><a href="blog-temp.html">Big Play</a>
        </li>
        <li><a href="consulting-clinic-temp.html">Sack</a>
        </li>
        <li><a href="contact.html">Interception</a>
        </li>
        <li><a href="contact.html">Bad Call</a>
        </li>
    </ul>
</nav>

<footer>
    <ul>
        <li><a href="choose.html">Choose</a>
        </li>
        <li><a href="manage.html">Manage</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
    </ul>
</footer>

Answer 1

Placed updated code in a jsFiddle

CSS changes:

footer li{ display:inline }

footer ul a{ 
    border: 1px solid #999;
    border-radius: 25px;
    display: inline-block; 
    margin: 0.0em 1.0em 0.0em 1.0em;
    padding: 0em 1.5em 0 1.5em;
    text-decoration: none;
    color: #222;
}