html - 間違った位置にあるcssドロップダウンメニュー

Question

純粋なcssドロップダウンメニューの配置に問題があります。あなたはウェブサイトを見つけることができます：ウェブ サイトへのリンク

「チュートリアル」（実際には何もしていませんが、学習用です）と「ブログ」にカーソルを合わせると、ドロップダウンメニューの位置がタブの真下ではなく、右に移動していることがわかります。

タブの下にドロップダウンメニューを配置するにはどうすればよいですか？よろしくお願いします。

Answer 1

ファイル「main.css」を編集してみてください。これを変更します。

ul#nav li ul{
position:absolute;
display:none;
}

このため：

ul#nav li ul{
position:absolute;
display:none;
padding:0;
margin:0;
}

ポジションの問題は解決すると思います。

Answer 2

要素のmargin's、 'sなどのブラウザのデフォルトをリセットする必要があります。padding

CSSの上部で実行できる最小値は次のとおりです。

html,body,ul,li,p { margin:0;padding:0 }

その他のオプションについては、 http：//cssreset.comを検索してください。

Answer 3

これは、ブラウザがカスタムCSSを一部の要素（この場合は「ul」タグなど）に自動的に追加するために発生します。Chromeを使用していますが、すべてのサブリストに次のスタイルが表示されます。-webkit-padding-start：40px; したがって、このcssを追加するだけです。

ul#nav li ul{
padding-left:0;
}