Why is the sub-nav positioning off in IE7?

I am experiencing a discrepancy between the views of the main navigation in IE7 versus all other browsers in this website

The active state and the hover state should completely cover the black with the tan. The other problem is that the sub-navigation background "jumps" up about 3px when you mouse over the menu.

Here is the html:

<ul id="mainNav">
        开发者_JAVA技巧<li><a class="selected" href="#">Home</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">About Us</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Home Remodels</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">New Home Builds</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Our Portfolio</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        <li><a href="#">Our Blog</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">FAQ'S</a>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 2</a>
                <a href="#">Sub Item 3</a>
                <a href="#">Sub Item 4</a>
            </span>
        </li>   
        <li><a href="#">Contact Us</a></li>
    </ul>

And here is the CSS

ul#mainNav      { clear: both; width: 930px; height: 39px; margin: -5px 0 0 0; padding: 0; float: left; list-style-type: none; position: relative; background-color: #0d0600; font: bold 14px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #fff; }
ul#mainNav li       { float: left; margin: 0; padding: 0; }
ul#mainNav li a         { padding: 12px 14px 12px 14px; display: block; text-decoration: none; color: #fff; }
ul#mainNav li a.selected,
ul#mainNav li a:hover             { background: #b5a37e url(../_images/bg_mainNav.jpg) repeat-x left top; }
ul#mainNav li span a:hover      { background-image: none; }
ul#mainNav span         { float: left; display: none; padding-top: 10px; position: absolute; z-index: 10; left: 0; top: 39px; width: 930px; background-color: #b5a37e; color: #fff; text-transform: none; }
ul#mainNav li:hover span        { display: block; }
ul#mainNav li span a                { display: inline; padding: 10px 14px 10px 14px; }
ul#mainNav li span a:hover, 
ul#mainNav li span a.selected   { text-decoration: underline; }

Thanks in advance for the help!

---

No one showed up so I kept at it and found my own solution:

I just needed to increase the padding:

ul#mainNav li a { padding: 12px 14px 18px 14px; }
ul#mainNav span { padding-top: 10px; top: 45px; }