How do I get the submenu to display properly?

Question

I am building a horizontal navigation that also has a horizontal submenu. Soh Tanaka has a nice tutorial on it, but the submenu does not display properly.

Here is the 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>

Here is the 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; }

The only problem is that in my working example, the submenu does not show up.

I would appreciate some guidance here.

Thanks!

Answer 1

you never actually display the span - it is set to display none but I am pretty sure that nothing ever changes this to display block in any of the hover assignments

Answer 2

You have to do a bit of javascript. I'll give you an example in jQuery:

$(document).ready(function (){

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

});

Haven't tested it, but it should work.

Answer 3

first of all you are not doing it right.... view the source of Soh Tanaka's tuturial...

the html code block structure is like this,

<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>
....................... 

in that, Home does not have a sub menu because it has no span in it.... unlike About which does have the span.... got the difference with your html structure?