Question

我正在努力实现用户在F.A.Q上盘旋的子菜单效果。链接和一个子菜单下降并显示另外两个选项 - 但我似乎甚至无法正确的HTML（更不用说jQuery），任何人都可以帮助我吗？出于某种原因，尽管我添加了“display：block”元素并且我无法让子菜单实际出现在F.A.Q下面，但子菜单中的列表项不会显示在单独的行中。 link = \

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元素。所以你可以添加一个新的选择器来将float值设置为none。

   #navigation #submenu li {
    float: none;
}

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

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

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

Answer 2

检查此演示：http://jsfiddle.net/kP4jt/

HTML代码

<ul>
    <li><a href='#'>One</a></li>
    <li><a href='#'>Two</a></li>
    <li><a href='#'>Three</a></li>
    <li><a href='#'>Four</a></li>
    <li><a href='#'>Five</a>
        <ul>
            <li><a href='#'>Sub Menu 1</a></li>
            <li><a href='#'>Sub Menu 2</a></li>
            <li><a href='#'>Sub Menu 3</a></li>
        </ul>
    </li>
</ul>

CSS代码

* { padding: 0; margin : 0; }
ul li { 
    float : left; 
    list-style-type : none; 
    position : relative;
}
ul li a { 
    display : block;
    padding : 5px 20px;
    background-color : #eee;
    text-decoration : none;
    border-right : 1px solid #ccc;
    border-bottom : 1px solid #ccc;
}
ul ul { 
    display : none; 
    position : absolute;
    left : -1px;
}
ul ul li { float : none; }
ul li:hover ul { display : block; }
ul ul a { 
    border-left : 1px solid #ccc; 
    width : 80px;
}

在HTML中，需要将子菜单<ul>放在<li>标记内。

根据需要添加效果。

Answer 3

将此添加到您的样式中，应该让您朝着正确的方向前进：

#navigation ul#submenu{
display:none;
}
#navigation ul:hover ul#submenu
{
display:block;
}

如何实现子菜单效果？

3 个答案: