CODEWITHSUNDEEP
jquerycss
user3266803
user3266803

Reputation: 1

jQuery dropdown menu hide ul li ul

I'm completely new to jQuery. I'm trying to understand why this drop down menu appears before the jQuery effect. I can't disable the "ul li ul" so it's only handled by jQuery .. I'd really appreciate any thoughts on this.

I've included the link to the site here

As soon as you hover the menu the ul flies out and then the jQuery effect is executed ...

Here is the JavaScript

<script type='text/javascript'>
  jQuery(document).ready(function(){
    jQuery('.menu-meny-1-container ul li').hoverIntent({
      over : navover,
      out : navout,
      timeout : 400
    });
    // (how to use both fade and slide effects!):
    function navover(){
      jQuery(this).children('ul')
        .stop(true,true)
        .fadeIn({duration:600,queue:false})
        .css('display','none')
        .slideDown(600);
    }
    function navout(){
      jQuery(this).children('ul')
        .stop(true,true)
        .fadeOut({duration:300,queue:false})
        .slideUp(300);
    }
  });
</script>

Here is the relevant CSS:

.main-navigation ul li:hover > ul {
    border-left: 0 none;
    display: block;
}
.main-navigation li ul {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 1;
}
.main-navigation ul {
    margin: 0;
    text-indent: 0;
}

Upvotes: 0

Views: 478

Answers (1)

kei
kei

Reputation: 20481

.main-navigation ul li:hover > ul {
    border-left: 0 none;
    display: none; /* CHANGED 'BLOCK' TO 'NONE' */
}

Upvotes: 1

Related Questions