Question

嘿，我在测试页面上有这个（原谅一些奇怪的设计元素，客户选择不会动摇）

下拉导航不会显示隐藏的无序列表项，就像我期望的那样。我添加了z-index：1认为幻灯片显示可能隐藏了它但是也没有用。

jQuery的：

$(function(){

    var config = {    
         sensitivity: 3,     
         interval: 200,     
         over: doOpen,       
         timeout: 200,      
         out: doClose      
    };

    function doOpen() {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }

    function doClose() {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    }

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ");

});

Answer 1

菜单中有一些无效的HTML。您ul直接包含ul个（子菜单），其中ul子菜单应该是父菜单li的一部分。

通过从网站上获取您的HTML，查看下面更正的HTML和示例演示Fiddle。

    <ul class="dropdown">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Domestic Plumbing</a> <!-- Issue here li was closed -->

        <ul class="sub_menu">
            <li><a href="#">Hot Water</a>
            </li>
            <li><a href="#">Drainage</a>
            </li>
            <li><a href="#">Toilets</a>
            </li>
            <li><a href="#">Taps</a>
            </li>
            <li><a href="#">Other</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Rural Plumbing</a><!-- Issue here li was closed -->

        <ul class="sub_menu"> 
            <li><a href="#">Septic Systems</a>
            </li>
            <li><a href="#">Effluent Systems</a>
            </li>
            <li><a href="#">Blocked Drains</a>
            </li>
            <li><a href="#">Absorption Trenches</a>
            </li>
            <li><a href="#">Other</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Commercial/Industrial Plumbing</a>
    </li>
    <li><a href="#">Bushfire Protection</a><!-- Issue here li was closed -->

        <ul class="sub_menu">
            <li><a href="#">External Sprinkler Systems</a>
            </li>
            <li><a href="#">Window Drenchers</a>
            </li>
            <li><a href="#">Tanks/Pumps/Accessories</a>
            </li>
            <li><a href="#">Testing &amp; Maintenance</a>
            </li>
        </ul>
    </li>
</ul>

下拉jquery导航无法正常工作

jQuery的：

1 个答案: