Почему суб-навигация отключена в IE7?

Question

Я испытываю несоответствие между представлениями основной навигации в IE7 и всеми другими браузерами на этом сайте

Активное состояние и состояние наведения должны полностью покрывать черный цвет загаром. Другая проблема заключается в том, что фон суб-навигации «подпрыгивает» примерно на 3 пикселя при наведении курсора на меню.

Вот HTML:

<ul id="mainNav">
        <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>

А вот и 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; }

Заранее спасибо за помощь!

Answer 1

Никто не появился, поэтому я продолжил и нашел собственное решение:

Мне просто нужно увеличить отступ:

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