私は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;
}