CODEWITHSUNDEEP
jquerynavigation
bezierer
bezierer

Reputation: 388

Dropdown jquery nav not working

Hey I have this up on a test page (excuse some odd design elements, client choice that wouldn't sway)

http://blueanchorcreative.com/

The dropdown nav doesn't reveal the hidden unordered list items like I am expecting it to. I added z-index: 1 thinking that maybe the slideshow was hiding it but that didn't work either.

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(" » ");

});

Upvotes: 0

Views: 126

Answers (1)

PSL
PSL

Reputation: 123739

You have some invalid HTML in your menu. You have ul's directly containing ul's (submenu), where in this ul submenu should be a part of parent menu's li.

See the corrected HTML below and a sample demo Fiddle by taking your html from the website. 

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

Upvotes: 1

Related Questions