Question

我正在构建一个缺口导航，其中一个三角形“cut out”用作活动li的标记。

我还希望有一些下拉菜单显示悬停时的下拉内容。

当使用下拉列表悬停在“当前”（活动）li上时，下拉内容会显示“切出”三角形。

如何从活动li的下拉内容中删除三角形“切出”（缺口）？

请查看codepen并将鼠标悬停在 Dropdown 2 ：

上

CSS

voice_16KHz.wav -> voice_1.mfcc
voice_44.1KHz.wav -> voice_2.mfcc
make hmm_model using voice_1.mfcc and voice_2.mfcc

HTML

.nav .current a:before,
.nav .current a:after{
    content:"";
    display:block;
    width:2em; /* Let's call this our magic number... */
    height:2em; /* ...our notch will be half this size. We define it in ems to scale it up with the text size. */
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-1em; /* Half of our magic number. */
}

Answer 1

您的HTML代码中嵌套了<a>个标记。您的样式设置为使用<a>和:before设置所有:after代码。您需要将样式限制为第一个<a>标记。

修改您的代码

.nav .current a:before { ... }
.nav .current a:after { ... }

以下......

.nav .current > div > a:before { ... }
.nav .current > div > a:after { ... }

>表示只将样式添加到直接子项中，仅此而已。

Answer 2

.nav .current .dropdown-content a:before,
.nav .current .dropdown-content a:after { display: none; }

如何防止子元素继承父元素的附加属性（在缺口导航中）？

2 个答案: