Question

只是学习HTML和CSS，并想知道如何在可扩展列表中拥有可扩展列表。我有一个问题，当我单击第一个可扩展列表时，第二个可扩展列表已经扩展。哟dawg，我听说你喜欢可扩展名单......

这是我的代码：

<!DOCTYPE html>

<head>
    <title>Sample</title>
</head>

<style>

body {
padding: 0;
margin: 0;
font-size: 18px;
font-family: Arial;
}

#nav {
background-color: black;
}

#navbar {
margin: auto;
width: 960px;
text-align:left;

}

#nav ul{
position: relative;
list-style-type: none;
padding:0;
margin: 0;
}

#nav ul li {
display: inline-block;
}

#nav ul li a {
text-decoration: none;
color: white;
padding: 15px;
display: block;
}

    #nav ul li:hover {
background-color: silver;
}

#nav ul ul{
display: none;
margin: 0;
background-color: black;
position: absolute;
}

#nav ul li:hover ul {
display: block;
}

#nav ul ul li {
display:block;
}

#nav ul ul ul{
display: none;
position: absolute;
margin-left: 110px;
margin-top: -52px;
background-color: black;

}

#nav ul ul li:hover ul{
display: block;
}

#nav ul ul ul li {
display: block;
}
</style>

<body>
    <div id="nav">
        <div id="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Social</a>
                    <ul>
                        <li><a href="#">Facebook</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">YouTube</a>
                            <ul>
                                <li><a href="#">Our Page</a></li>
                                <li><a href="#">Top Videos</a></li>
                                <li><a href="#">Popular</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

</body>

Answer 1

使用child (direct descendant)选择器>代替后代选择器

#nav ul>li:hover>ul {
display: block;
}

Demo

您目前正在做的是：当将li设置为ul时，无论深度如何，都将display:block设置为li。

新代码说：当将ul设置为li的{{1}}的{{1}}个display:block时ul。嵌套深度的任何{{1}}都不会受到影响。

如何在HTML中的可扩展列表中创建可扩展列表？

1 个答案: