html - 如何实现子菜单效果？

Question

我正在尝试实现用户将鼠标悬停在 F.A.Q 上的子菜单效果。链接和一个子菜单下拉并显示其他两个选项 - 但我似乎无法获得正确的 HTML(更不用说 jQuery)，有人可以帮我吗？出于某种原因，尽管我添加了“显示: block ”元素，但子菜单中的列表项并未显示在单独的行中，而且我无法让子菜单实际出现在 F.A.Q 下方。链接=\

http://jsfiddle.net/Kk8uw/

<nav id="navigation">
    <ul>
        <li><a href="/">Home</a>

        </li>
        <li><a href="/catalog.php">Catalog</a>

        </li>
        <li><a href="/build.php">Create A Sword</a>

        </li>
        <li><a href="/about.php">About Us</a>

        </li>
        <li><a href="/faq.php">F.A.Q.</a>

        </li>
        <ul id="submenu">
            <li><a href="/measurement.php">Measuring</a>

            </li>
            <li><a href="/terminology.php">Terminology</a>

            </li>
        </ul>
        <li><a href="/contact.php">Contact Us</a>

    </ul>
</nav>

CSS

#navigation {
    background: #000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    height: 36px;
}
#navigation ul {
    list-style-type: none;
    margin-left: 10px;
    padding: 0px;
}
#navigation ul li {
    float: left;
    display: block;
    border-right: 1px solid #444;
}
#navigation ul li a {
    display: block;
    padding: 10px;
    font-size: 13px;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}
#navigation ul li a:hover {
    color: maroon;
}
#navigation ul li:first-child a {
    padding-left: 0px;
}
#submenu {
    position: absolute;
    left: 90px;
    list-style: none;
    top: 30px;
    background: #222222;
}
#navigation ul#submenu li a {
    display: block;
    padding: 5px 5px 13px 0px;
}
#navigation ul#submenu li {
    display: block;
    border: none;
}

Answer 1

问题是您从 #navigation ul li 选择器继承了 float 属性。选择器以 #navigation 容器中包含的任何 li 元素为目标。因此，您可以添加一个新的选择器以将浮点值设置为无。

   #navigation #submenu li {
    float: none;
}

但是，使用 id 进行样式设置会导致样式表膨胀，并且 !important 指令会被覆盖。我建议使用类选择器来避免设置你的 css 选择器的特异性并最大化代码重用。

我注意到的另一件事是您在最后一个菜单项上缺少结束标记。我为你做了一个快速的 jsfiddle:

http://jsfiddle.net/beyondhyper/wMpgJ/3/