html - 最後のliの位置がずれているのはなぜですか？

Question

ナビゲーションバーを編集しようとしていますが、最後のliが少し下がっています。また、カーソルを合わせるEnglishと、他の言語のドロップダウンが表示されるはずです。こちらをご覧ください：

http://jsfiddle.net/kKqZS/1/

ドロップダウンの問題の原因は何ですか?

Answer 1

 あなたのhtmlからそれらを削除します

作業フィドル: http://jsfiddle.net/surendraVsingh/kKqZS/10/

だから、私はそのドロップダウンが機能するようにしました。国ドロップダウンの親liの中に余分なliがあります。

CSS には名前の付いたクラスがあるので、HTML のどこにも使用されていない.no-js.no-js #main-nav li:hover > ulを削除し、この完全なクラスを後に移動することをお勧めします。#main-nav ul ul

Answer 2

これは機能します：http://jsfiddle.net/ryAJ2/

ネストされた ul を表示するための html コードと css セレクターに問題がありました。

Answer 3

あなたのコード:

<li>
    <li class="top"><a href="http://bin.xxx/?op=change_lang&lang=english">English</a</li>
    <ul>
        <li><a href="http://bin.xxx/?op=change_lang&lang=russian">Russian</a></li>
        <li><a href="http://bin.xxx/?op=change_lang&lang=german">German</a></li>
        ...
    </ul>
</li>

li 要素を li 内にネストすることはできません。ブラウザは li タグを自動的に閉じ、次のようなコードを理解します。

<li></li>
<li>English</li>
<ul>
        <li><a href="http://bin.xxx/?op=change_lang&lang=russian">Russian</a></li>
        <li><a href="http://bin.xxx/?op=change_lang&lang=german">German</a></li>
</ul>