html - 为什么最后一个li不在位？

Question

我正在尝试编辑导航栏，但最后一个 li 有点下降。另外，当我将鼠标悬停在上面时English，应该会出现其他语言的下拉菜单。请看这里：

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

是什么导致下拉问题？

Answer 1

 从你的 html中删除那些

工作小提琴：http: //jsfiddle.net/surendraVsingh/kKqZS/10/

因此，我使该下拉菜单在国家下拉列表的父 li内有一个额外的 li 。

CSS 有一个名为的类.no-js #main-nav li:hover > ul，所以我删除了.no-js，因为它在 HTML 中的任何地方都没有使用，然后移动这个完整的类#main-nav ul ul作为它的一个好习惯。

Answer 2

这个有效：http: //jsfiddle.net/ryAJ2/

html 代码以及用于显示嵌套 ul 的 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>