下拉jQuery导航不起作用

Question

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

http://blueanchorcreative.com/

下拉导航不会像我期望的那样显示隐藏的无序列表项。我添加了 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(" » ");

});

Answer 1

您的菜单中有一些无效的 HTML。 您有 ul's 直接包含 ul's（子菜单），其中 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>