Why does this jquery dropdown not work?

Question

This code seems to show everything correctly but then when launched in the browser, the drop down doesn't work. The hover styling and everything works correctly except for the dropdown. Thank you.

HTML:





GS4 Concept Home Page






    
    
        
                Main Cat 1
                Main Cat 2 
            
                Sub Cat 2-1
                Sub Cat 2-2
                Sub Cat 2-3
                Sub Cat 2-4
                Sub Cat 2-5
            
                Main Cat 3 
            
                Sub Cat 3-1
                Sub Cat 3-2
                Sub Cat 3-3
                Sub Cat 3-4
                Sub Cat 3-5
                Sub Cat 3-6
                Sub Cat 3-7

CSS:

@charset "utf-8";
/* CSS Document */
body{
    background-image:url(Images/backgroundmain.jpg);
    min-width:100%;
    font-family: Arial, Helvetica,sans-serif;
    font-size:15px;
}

#header{
    background-color:#474747;
    width:100%;
    display:block;
}

#container{
    margin:auto;
    width:70%;
}

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

.navigation li {
    float:left;
    width:150px;
    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;
}

.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 li').hover(

    function() {
        $('ul', this).fadeIn();
    }, function() {
        $('ul', this).fadeOut();
    });
});

friedi · Accepted Answer

Your scripts are in the wrong order.

Instead of

try this:

And also make a nested list, so that your selectors are correct in the main.js file:


   Main Cat 1
   Main Cat 2 
       
           Sub Cat 2-1
           Sub Cat 2-2
           Sub Cat 2-3
           Sub Cat 2-4
           Sub Cat 2-5
       
   
   Main Cat 3 
       
           Sub Cat 3-1
           Sub Cat 3-2
           Sub Cat 3-3
           Sub Cat 3-4
           Sub Cat 3-5
           Sub Cat 3-6
           Sub Cat 3-7

Why does this jquery dropdown not work?

Answers (2)

Related Questions