Question

我正在开发一个项目，我被指派显示一个嵌套菜单，我的意思是下拉菜单，但我不知道我在这里做错了什么。任何人都可以帮助我吗？

HTML

<div id="nav">
            <ul>
                <li><a href="#">Menu Num 1</a></li>
                <li><a href="#">Menu Num 2</a>
                    <ul>
                        <li><a href="#">Sub Menu 2.1</a></li>
                        <li><a href="#">Sub Menu 2.2</a></li>
                        <li><a href="#">Sub Menu 2.3</a>
                            <ul>
                                <li><a href="#">Sub Sub Menu 2.3.1</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.2</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.3</a></li>
                                <li><a href="#">Sub Sub Menu 2.3.4</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Sub Menu 2.4</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu Num 3</a></li>
                <li><a href="#">Menu Num 4</a></li>
            </ul>
        </div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
#nav ul {
    list-style-type: none;
    font-size: 0px;
}
#nav ul li {
    display: inline-block;
    position: relative;
}
#nav ul li a {
    padding: 10px;
    display: block;
    font-size: 12px;
    text-decoration: none;
    font-family: sans-serif;
    border: 1px solid #008080;
    margin: 5px;
}
#nav ul li a:hover {
    background: #a1a1a1;
}
#nav ul ul {
    display: none;
}
#nav ul li:hover > ul {
    position: absolute;
    display: block;
    width: 100%;
}

我唯一的问题是li项在每个父li下都没有正确显示。我需要一个解决方案，为了进一步的代码检查，我有一个jsFiddle链接。

Answer 1

尝试添加display：block;到你的顶级悬停类

#nav ul li a:hover {
    background: #a1a1a1;
    display:block;
}

我偶然发现了这对您有用http://htmldog.com/techniques/dropdowns/

Answer 2

我有一个问题的解决方案。你必须在你的css表中做一些更改。我在css表中的内容上添加一个新块，它可以帮助你解决问题。

* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */

CSS下拉菜单显示问题

2 个答案: