Question

您好我在我的导航菜单CSS上添加了这个。它会在我的菜单底部添加一个三角形效果。问题是，它也将它添加到子菜单上。

.nav-menu li a:hover:after {
content: "";
display: block;
border: 10px solid #000;
border-bottom-color: #48c5f2;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -12px;
}

如何删除子菜单中的三角效果？我猜我应该放这样的东西？

.nav-menu li li a:hover:after { SOME CODES I DONT KNOW SO IT WILL REMOVE THE TRIANGLE; }

Answer 1

如果要覆盖它，请使用：

.nav-menu li li a:hover:after {
    content:none;
}

如果这是正确的选择器，它将起作用，假设它更具体，并在初始声明后放置..

或者，如果您不喜欢这种方法，可以通过在初始声明中使用child selector >来阻止它应用于子项：

.nav-menu > li a:hover:after {}

基本上，这是将初始样式应用于li元素，.nav-menu元素是.nav-menu li li的直接子元素。因此，子元素（{{1}}）将不会收到样式，因此不必重置。

除此之外，还有:not selector。

删除子菜单中的三角形CSS效果

1 个答案: