0

CSSのみのドロップダウンメニューを作っています。
ここに例があります。
http://jsfiddle.net/DEK8q/8/
このメニューを中央に配置したいと思います。したがって、次のように相対位置を追加します。

#nav-container {
    position: relative;
    float: left;
    left: 50%;
}

#nav {
    ***position: relative;***
    float: left;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

ナビゲーションを相対的に配置すると、メニューの第 2 レベルが表示されないことがわかりました。
これは、相対的に配置された div にディスプレイ バウンドがあるためです。
cssのみにして中央揃えにしたいです。どうすればこの問題を解決できますか?

4

5 に答える 5

0

異なるアプローチを使用できます

#nav-container {
    position: relative;
    float: left;
    width:100%;
}

#nav {
    position: absolute;
    left:50%;
    margin-left:-160px; /* This is the width of your menu / 2       */
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

ご覧ください：http： //jsfiddle.net/DEK8q/8/

于 2013-03-13T08:50:16.970 に答える
0

これも試せます

#nav {
    border: 1px solid #121314;
    font: bold 12px SimHei,Arial,Helvetica,Sans-serif;
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}

http://jsfiddle.net/DEK8q/29/

于 2013-03-13T08:48:45.573 に答える
0

ここに解決策があります：http://jsfiddle.net/DEK8q/36/

使用される重要な CSS スタイルの一部は次のとおりです。

#nav-container {
    position: relative;
    left: 50%;
}

#nav {
    position:absolute;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
}

#nav ul{
    list-style:none;
}

#nav > ul{
    margin:0px;
    padding:0px;
}

#nav li{
    float:left;
    position:relative;
}

#nav li ul{
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    padding:0px;
    margin:0px;
}

#nav li li ul{
    left:100%;
    top:0px;
}


#nav li:hover > ul{
    display:block;
}
于 2013-03-13T09:46:14.510 に答える
0

left の代わりに position static と margin-left を使用して解決策を見つけました。

#nav {
    position: static;
    float: left;
    margin-left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

http://jsfiddle.net/LrmUS/1/

于 2013-03-13T08:45:21.047 に答える