0

問題のあるjqueryドロップダウンメニューがあります。メインメニューとサブメニューを重ねたかったのですが、基本的には画像がメインメニューです。

実際のシナリオの重複へのリンクは失敗します

これがCSSコードです` 

/* 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」をオーバーラップする方法だと思います。ここで私を助けてくれることを願っています。どうもありがとう

4

1 に答える 1

0

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;
}
于 2012-06-21T14:21:37.240 に答える