0

メニューを開発するために見つけた既存の CSS コードをいくつか変更しました。ドロップダウンメニューをクリックした場合を除いて、すべて正常に動作します。ページに別の HTML コンポーネントがある場合、メニューはコンポーネントの上にとどまるのではなく、コンポーネントの後ろにとどまります (私の説明が理にかなっていることを願っています)。

CSSは次のとおりです。

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
}

#navMenu ul{
    margin:0;
    padding:0;
    line-height:30px;
}

#navMenu li {
    margin:0;
    padding:0;
    /*removes the bullet point*/
    list-style:none;
    float:left;
    position:relative;
    background-color:  #F9F9F9;
}

/*for top level */
#navMenu ul li a{
    text-align:center;
    font-weight:bold;
    font-size:0.8em;
    line-height:height;
    font-family:Arial,Helvetica,sans-serif;
    text-decoration:none; /*remove underline*/

    margin:-1px;
    /*height width for all links*/
    height:30px;
    width:150px;
    display:block;
    /*border-bottom: 1px solid #ccc;*/
    color: #00611C;
}

/* hiding inner ul*/
#navMenu ul ul{
    position:absolute;
    visibility:hidden;
    /*must match height of ul li a*/
    top:28px;
}

/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
    visibility:visible;
}

#navMenu li:hover {
    /*background-color: #F9F9F9;*/
    background-color: #DBDB70;  
    border-radius: 5px;
}

#navMenu ul li:hover ul li a:hover{    
   /* color: E2144A;*/
   color:#E2144A;
}
#navMenu ul li a:hover{
    /*color: E2144A;*/
    color:#E2144A;
}

ドロップダウンメニューを一番上に表示できるようにするために何が欠けているか教えてもらえますか?

ありがとう。

4

4 に答える 4

1

メニューに z-index: 1; を指定してみてください。（以上）。メニューを覆っているコンテンツの z-index を下げることもできます。

于 2012-08-08T01:57:00.163 に答える
1

使用してz-indexください。

#navMenu{
    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    /*width: 944px;*/
    width:100%;
    font-weight:normal;
    font-size:15px;
    z-index:1;
}
于 2012-08-08T01:55:33.033 に答える
1

これをトラブルシューティングするには、CSS だけでなく、HTML コードがあると便利です。しかし、あなたが投稿した CSS だけで、希望する方法から後方にレイヤー化された要素に z-index を設定することを検討してください。

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index?redirectlocale=en-US&redirectslug=Understanding_CSS_z-index

于 2012-08-08T01:55:35.413 に答える
1

メニューをラップする親を所定の位置に設定する必要があります: 相対。これは本体または外側のラッパーである可能性があります。次に、絶対位置を使用して常に上部に配置し、z-index を指定できます。

詳細については、こちらの z-index プロパティ情報を参照してください: https://bytutorial.com/tutorials/css/css-z-index

于 2012-08-08T01:59:39.293 に答える