JQuery выпадающее меню перекрытия

Question

У меня есть раскрывающееся меню jquery, которое у меня есть. Я хотел, чтобы перекрыл мое главное меню под моим подменю, в основном изображение является главным меню.!

ссылку на фактический сценарий overlap fail

вот CSS code`

/* make the LI display inline */ 
/* it's position relative so that position absolute */ 
/* can be used in submenu */ 
#nav li { 
    float:left; 
    display:block; 
    width:100px; 
    background:#fff; 
    position:relative; 
    margin:0 1px; 
    z-index:1; 

} 

/* this is the parent menu */ 
#nav li a { 
    /*display:block;*/ 
    padding:8px 5px 0 5px; 
    font-weight:700; 
    height:23px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333; 
    z-index:-1; 

    } 

#nav li a:hover { 
    color:#ccc; 
} 

/* you can make a different style for default selected value */ 
#nav a.selected { 
    color:#f00; 
} 

    /* submenu, it's hidden by default */ 
    #nav ul { 
     position:absolute; 
     left:0; 
     top:0; 
     display:none; 
     margin:0 0 0 -1px; 
     padding:0; 
     list-style:none; 
     z-index:1; 
     } 

    #nav ul li { 
     width:100px; 
     float:left; 
     border-top:1px solid #fff; 
    } 

    /* display block will make the link fill the whole area of LI */ 
    #nav ul a { 
     display:block; 
     height:15px; 
     padding: 8px 5px; 
     color:#666; 
    } 

    #nav ul a:hover { 
     text-decoration:underline; 
    } 
    #nav a { 
     display:block; color:#000; text-decoration:none; 
    } 
    #nav ul li a { 
     display:block; padding:3px 7px 5px; background-color:#ccc; color:#333; 
    } 
     #nav ul li a:hover { 
     background-color:#ccc; text-decoration:underline; color: white; 
    } 
     #nav ul ul { 
      left:102px; top:-1px; display:none; position:absolute; z-index: 9998; 
    } 

    /* fix ie6 small issue */ 
    /* we should always avoid using hack like this */ 
    /* should put it into separate file :) */ 
    *html #nav ul { 
     margin:0 0 0 -2px; 
      } 

`

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#nav li').hover(
     function() { 
      //show its submenu 
      $('ul', this).slideDown(100); 

     }, 
     function() { 
      //hide its submenu 
      $('ul', this).slideUp(100);   
     } 
    ); 

}); 
</script> 

я думаю, что нужно вот как перекрываться другой 'LI' в подменю надеюсь, что вы можете помочь мне здесь. спасибо

Answer 1

Если вы устанавливаете значение z-index для селектора, position также должен быть absolute или relative. Здесь вы устанавливаете z-index: -1, но нет значения position (если только оно не унаследовано в другом месте).

/* this is the parent menu */ 
#nav li a { 
    /*display:block;*/ 
    padding:8px 5px 0 5px; 
    font-weight:700; 
    height:23px; 
    text-decoration:none; 
    color:#fff; 
    text-align:center; 
    color:#333; 
    z-index:-1; 
}