0

私はcssで水平ナビゲーションメニューを作成しました。左にフロートしています。正常に動作します。

フロートを右に変更すると（そしてトップレベルのliの順序を逆にすると）、サブメニューが少し左にシフトされることを除いてすべてが正常です（したがって、トップレベルのメニュー項目と垂直に整列しないでください）。

で左のコマンドを変更してみましli:hover > .navたが、うまくいきませんでした。トップレベルのナビゲーションアイテムとサブメニューのアイテムの垂直方向の配置を取得するために何を変更する必要があるかを誰かが理解できますか？

ありがとう。

私のCSSは次のとおりです。

#nav, .nav, #nav .nav li { 
    margin:0px; 
    padding:0px; 
}

#nav li {
    float:right; 
    display:inline; 
    cursor:pointer; 
    list-style:none; 
    padding:10px 30px 10px 30px; 
    border:1px #000 solid;  
    position:relative;
    background: #990000;
}

#nav li ul.first {
    left:-1px; 
    top:100%;
}

li, li a {
    color:#fff; 
    text-decoration:none;
}

#nav .nav li { 
    width:100%; 
    text-indent:10px; 
    line-height:30px; 
    margin-right:10px; 
    border-top:1px #000 solid; 
    border-bottom:1px #000 solid;
    border-left:none; 
    border-right:none; 
    background:#990000;
}

#nav li a {
    display:block; 
    width:inherit; 
    height:inherit;
}

ul.nav { 
    display:none; 
}

#nav li:hover > a, #nav li:hover { 
    color:#990000; 
    background:#fff; 
}

li:hover > .nav { 
    display:block; 
    position:absolute; 
    width:200px; 
    top:-2px; 
    left:50%; 
    z-index:1000; 
    border:1px #000 solid; 
}

li:hover { 
    position:relative; 
    z-index:2000; 
}

#basic li {
    color:#000;
}
4

2 に答える 2

0

上記の答えを試すことに加えてposition:relative、右または左のプロパティを使用してサブメニューをバンプすることができます。メニューは、自然に落ちる位置に対して指定したピクセル数だけ移動します。

于 2012-09-29T18:00:08.520 に答える
0

float: leftからに切り替えるときにfloat: right、すべての左関連のプロパティを右に、右から左に交換しましたか?

例:

  • margin-leftで置き換えるmargin-right
  • 価値の交換。margin 1px 2px 3px 4pxになるmargin 1px 4px 3px 2px
于 2012-09-29T17:35:55.433 に答える