Question

我正在尝试创建css下拉菜单。我正在尝试跟随html和css

 .nav > li{
    display: inline-block;   
}
.nav{
    background-color: #666666;
}
.nav a{
    color:#ffffff;
    text-decoration: none;
}
.nav .subnav .subs{
    display: none;
}

.subs{
    position: absolute;
    background-color: #444;
}
.subs a{
  display:block;
  padding:10px;
}

li:hover > ul  {
    display: block;
}

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li class="subnav">
        <a href="#">Courses</a>
        <ul class="subs">
            <li><a href="#">B.tech</a></li>
            <li><a href="#">BSC</a></li>
        </ul>
    </li>
</ul>

上面的代码不起作用，因为我正在选择像.nav .subnav .subs

这样的.subs

.nav .subnav .subs{
    display: none;
}

但如果我这样做

.subs{
    display:none;
}

工作正常。我的问题是，如果我选择像.nav .subnav .subs这样的元素，它为什么不起作用？和有什么区别。

Answer 1

这是因为选择者的特异性。在为相同元素使用不同规则时，您需要在选择器中更具体。而不是

li:hover > ul {
    display: block;
}

尝试：

li.subnav:hover > ul.subs {
    display: block;
}

即。更具体的选择器，以元素为目标。

如果这不起作用，那么您可以使用!important。我不会建议你选择这个选项。更好地使CSS选择器更具体。

使用继承的类时，下拉菜单不显示

1 个答案: