0

我正在尝试实现子菜单效果，其中用户将鼠标悬停在常见问题解答链接上，子菜单下拉并显示其他两个选项-但我似乎什至无法正确获取 HTML（更不用说 jQuery），谁能帮忙我出去？出于某种原因，尽管我添加了“显示：块”元素并且我无法让子菜单实际出现在常见问题链接下方，但子菜单中的列表项并未显示在单独的行中=\

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;
}
4

3 回答 3

2

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

   #navigation #submenu li {
    float: none;
}

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

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

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

于 2013-08-06T02:17:26.990 回答
0

检查这个演示：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>标签内。

根据需要添加效果。

于 2013-08-06T01:49:14.643 回答
0

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

#navigation ul#submenu{
display:none;
}
#navigation ul:hover ul#submenu
{
display:block;
}
于 2013-08-06T01:51:29.677 回答