不想要递归：之后为我的 ul li 下拉菜单

Question

我遇到了这个烦人的问题。我有一个导航，其中有一个下拉菜单，由第一个<ul>的每个<li>中的许多<ul>组成

我对主<ul>有一个：后效应。它设置了一个分隔符，但我不希望这个分隔符出现在<ul><li>的<ul><li>中。

这是我的代码

nav ul li {
-webkit-transition: background-color .3s;
transition: background-color .3s;
float: left;
padding: 0;
transition:0.5s all;
position: relative;
display: block;
letter-spacing: -1px;
}
nav ul li:after {
height:60%;
content:'';
border-left: solid 1px rgba(255, 255, 255,0.3);
position: absolute;
transform: translateX(-50%) translateY(-50%);
left: 0px;
top: 50%;
transition:0.5s all;
-webkit-transition: 0.5s all;
}
nav ul li ul li:after {
content:none!important;
height:0%!important;
content:unset;
border-left: unset;
position: unset;
transform: unset;
left: unset;
top: unset;
}

<header id="header">
<nav>
<div class="bar">
<div class="brand-logo">
Paris Avenir</div>
<ul id="nav-normal" class="right">

<li><a href="#">Aide/Tutos/Astuces<i class="fas fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#">J'arrive à Paris</a></li>
<li><a href="#">Impositions</a></li>
<li><a href="#">Fonctionnement de la mairie</a></li>
<li><a href="#">PLU</a></li>
<li><a href="#">Emploi/Formation</a></li>
</ul>
</li>
<li><a href="#">Nos actions<i class="fas fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#">Décryptage des conseils municipaux</a></li>
<li><a href="#">Étude des budgets</a></li>
<li><a href="#">Actualités</a></li>
</ul></li>

<li><a id="search"><i class="fas fa-search"></i></a></li>

</ul>
</div>
</nav>

</header>

这看起来很容易，但并不奏效。谢谢你，Matthieu

Answer 1

您只想选择nav-normal的id的ul，并使用子组合子CSS选择器：

ul#nav-normal > li::after

您可以在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator

请注意，我已经更改了::after元素的样式，使其更容易可见

nav ul li {
-webkit-transition: background-color .3s;
transition: background-color .3s;
float: left;
padding: 0;
transition: 0.5s all;
position: relative;
display: block;
letter-spacing: -1px;
}
ul#nav-normal>li::after {
content: '[:after content]';
color: red;
}

<header id="header">
<nav>
<div class="bar">
<div class="brand-logo">Paris Avenir</div>
<ul id="nav-normal" class="right">

<li>
<a href="#">Aide/Tutos/Astuces<i class="fas fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#">J'arrive à Paris</a></li>
<li><a href="#">Impositions</a></li>
<li><a href="#">Fonctionnement de la mairie</a></li>
<li><a href="#">PLU</a></li>
<li><a href="#">Emploi/Formation</a></li>
</ul>
</li>
<li>
<a href="#">Nos actions<i class="fas fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#">Décryptage des conseils municipaux</a></li>
<li><a href="#">Étude des budgets</a></li>
<li><a href="#">Actualités</a></li>
</ul>
</li>

<li><a id="search"><i class="fas fa-search"></i></a></li>

</ul>
</div>
</nav>

</header>