マウスオーバーでサブメニューが右側にポップアップする垂直ナビゲーションバーを作成しています。
唯一の問題は、ナビゲーション バーの上部または下部に配置されているかどうかに関係なく、カテゴリをマウスオーバーすると、サブ カテゴリ バーがナビゲーション バーの上部の右側に表示されることです。
これらの作成方法についていくつか読んだところ、ポジショニングを絶対に設定してから、左からオフセットすることになっていると思われます。これは、サブメニューの CSS コードです。
#sidenav2 li ul
{
position:absolute;
left:200px;
Top:0px;
display:none;
}
だから私はそれがトップ設定と関係があるかもしれないと考え、それを取り除きました. 驚いたことに、ほとんど機能しました。各サブメニューは、ホバーした要素に対応する別の場所にポップアップしていました。唯一の問題は、ポップアップが約 10 ピクセル低すぎることでした。css ルールがどのように適用されるかをよく理解していないので、小さな下部オフセットを適用して各サブメニューを少し上に上げることができるかもしれないと考えましたが、それらはすべて下部近くにポップアップし始めました。
これを修正する方法がわかりません。さらに悪いことに、この一見恣意的な結果、またはそれらを決定するルールについていく方法がわかりません。
違いがある場合、メニュー項目とサブメニューは静的 html で記述されていません。それらは、すべてのカテゴリの子のそれぞれをその項目のリスト内の順序付けられていないリスト内に配置する mysql クエリの結果です。
これが私の他の関連するcssコードです。問題はここのどこかにある可能性が非常に高いです。
#sidenav2
{
float:left;
width:200px;
border: solid black 1px;
height:1000px;
background-color:red;
margin-top:-10px;
}
#sidenav2 ul
{
position: relative;
list-style-type:none;
border:0px;
padding:0px;
background-color:red;
}
#sidenav2 ul li
{
display:block;
padding:5px;
color:white;
cursor:pointer;
}
どんな助けや洞察も大歓迎です！