Question

我正在构建一个水平导航，它也有一个水平子菜单。 Soh Tanaka有一个很好的教程，但子菜单无法正确显示。

这是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; }

唯一的问题是，在我的working example中，子菜单没有出现。

我会在此感谢一些指导。

谢谢！

Answer 1

首先，你做得不对......查看Soh Tanaka的tuturial来源......

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

你实际上从未显示过跨度 - 它被设置为显示无，但我很确定在任何悬停分配中都没有任何改变显示块

Answer 3

你必须做一些javascript。我将在jQuery中给你一个例子：

$(document).ready(function (){

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

});

没有测试过，但它应该可以工作。

如何正确显示子菜单？

3 个答案: