Как мне правильно отобразить подменю?

Question

Я строю горизонтальную навигацию, которая также имеет горизонтальное подменю. Сох Танака имеет хороший учебник, но подменю не отображается должным образом.

Вот HTML:

<ul id="mainNav">
        <li><a class="selected" href="#">Home</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">About Us</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">Home Remodels</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">New Home Builds</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">Our Portfolio</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        <li><a href="#">Our Blog</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">FAQ'S</a></li>
        <li>
            <span>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
                <a href="#">Sub Item 1</a>
            </span>
        </li>   
        <li><a href="#">Contact Us</a></li>
    </ul>

Вот CSS:

ul#mainNav                  { 
                        clear: both;
                        width: 935px;
                        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 15px 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 span             { 
                        float: left;
                        display: none; 
                        padding: 15px 0;
                        position: absolute;
                        z-index: 10;
                        left: 0;
                        top: 35px;
                        width: 935px;
                        background-color: #b5a37e;
                        color: #fff;
                        text-transform: none;
                        }
ul#mainNav li:hover span    { display: block; }
ul#mainNav li span a        { display: inline; }
ul#mainNav li span a:hover  { text-decoration: underline; }

Единственная проблема заключается в том, что в моем рабочем примере подменю не отображается.

Я был бы признателен за некоторые указания здесь.

Спасибо!

Answer 1

во-первых, вы не делаете это правильно .... посмотрите исходный текст пособия Со Танаки ...

структура HTML-кода выглядит следующим образом:

<ul id="topnav"> 
        <li><a href="#">Home</a></li> 
        <li> 
            <a href="#">About</a>
            <span> 
                <a href="#">The Company</a> |
                <a href="#">The Team</a> |
                <a href="#">Careers</a> 
            </span> 
        </li>
....................... 

в этом, Home не имеет подменю, потому что в нем нет промежутка .... в отличие от About, который имеет промежуток .... получил разницу с вашей HTML-структурой?

Answer 2

Вы должны сделать немного JavaScript. Я приведу пример в jQuery:

$(document).ready(function (){

      $('li a').mouseover(function () { $(this).parent().next().css("display", "inline"); }).mouseout(function () { $(this).parent().next().css("display", "none"); })

});

Не проверял, но он должен работать.

Answer 3

вы фактически не отображаете диапазон - он настроен на отображение ни одного, но я уверен, что ничто никогда не изменит это, чтобы отобразить блок в любом из назначений наведения