Question

使用以下代码我可以显示ABOUT和FAQ子菜单，但鼠标悬停时不会出现任何内容，我不明白为什么。请帮忙！如果有更多代码，我应该告诉我，让我知道！在此先感谢您的任何帮助：）

HTML：

 <ul class="navigation">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a>
                <ul>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Location</a></li>
                    <li><a href="#">Gallery Tour</a></li>
                    <li><a href="#">Testimonials</a></li>

                </ul>
            </li>
            <li><a href="#">Accomodations</a></li>
                <ul>
                    <li><a href="#">Event Space</a></li>
                    <li><a href="#">Guest Rooms</a></li>
                    <li><a href="#">Kitchen and Catering Facility</a></li>
                </ul>           
            </li>
            <li><a href="#">Activities</a></li>
                <ul>
                    <li><a href="#">The Katy Trail</a></li>
                    <li><a href="#">Augusta</a></li>
                    <li><a href="#">St. Louis Attractions</a></li>
                </ul>
            <li><a href="#">Reservations</a></li>
                <ul>
                    <li><a href="#">Rates</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Request Info</a></li>
                    <li><a href="#">Event Agreement Form</a></li>
                 </ul>
                    <li><a href="#">FAQ</a>
                <ul>
                    <li><a href="#">Additional Info</a></li>
                    <li><a href="#">Catering</a></li>
                </ul>
</ul>

CSS：

.navigation  {margin:0; padding:0;list-style:none;  }   


    .navigation  li {
        float:left;         
        width:120px; 
        position:relative; 
    }


    .navigation  li a {
        background:#262626; 
        color:#fff;
        display:block;      
        padding:8px 7px 8px 7px; 
        text-decoration:none; 
        border-top:1px solid #F2861D;
        text-align:center; 
        text-transform:uppercase;
    }

    .navigation  li a:hover {
        color:#F2861D;
    }


    .navigation  ul {
        position:absolute; 
        left:0; 
        display:none; 
        margin:0 0 0 -1px; 
        padding:0; 
        list-style:none;
        border-bottom:3px solid #F2861D;
    }

    .navigation  ul li {
        width:150px; 
        float:left; 
        border-top:none;
        overflow: visible;
    }


    .navigation  ul a {
        display:block;      
        height:15px;
        padding:8px 7px 13px 7px; 
        color:#fff;
        text-decoration:none;   
        border-top:none;
        border-bottom:1px dashed #6B6B6B;
    }

    .navigation  ul a:hover {
        color:#F2861D;
    }`

Javascript：

$(document).ready(function() {
    // Navigation function
    $('.navigation li').hover(function () {
            $('ul', this).fadeIn();
    },
    function () {$('ul', this).fadeOut();}
    );

jsFiddle

Answer 1

住宿，活动和预订的li元素未正确嵌套子菜单的ul元素。查看此JS Fiddle中的代码以获得更正版本：

http://jsfiddle.net/9NdZC/

以下是HTML部分：

<ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
            <ul>
                <li><a href="#">History</a></li>
                <li><a href="#">Location</a></li>
                <li><a href="#">Gallery Tour</a></li>
                <li><a href="#">Testimonials</a></li>

            </ul>
        </li>
        <li><a href="#">Accomodations</a>
            <ul>
                <li><a href="#">Event Space</a></li>
                <li><a href="#">Guest Rooms</a></li>
              <li><a href="#">Kitchen and Catering Facility</a></li>
            </ul>           
        </li>
        <li><a href="#">Activities</a>
            <ul>
                <li><a href="#">The Katy Trail</a></li>
                <li><a href="#">Augusta</a></li>
                <li><a href="#">St. Louis Attractions</a></li>
            </ul>
        </li>
        <li><a href="#">Reservations</a>
            <ul>
                <li><a href="#">Rates</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Request Info</a></li>
                <li><a href="#">Event Agreement Form</a></li>
             </ul>
           </li>
           <li><a href="#">FAQ</a>
            <ul>
                <li><a href="#">Additional Info</a></li>
                <li><a href="#">Catering</a></li>
            </ul>
           </li>
     </ul>

jQuery子菜单不会显示

1 个答案: