Don't want recursive :after for my ul li dropdown menu - html

Question

I'm stuck with this annoying problem. I have a nav in which there is a dropdown menu, composed by many <ul> in each <li>of the first <ul>
I have an :after effect for the main <ul>. It set a separator, but I don't want this separator in the <ul><li> of the <ul><li>.
Here is my code
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>Aide/Tutos/Astuces<i class="fas fa-angle-down"></i>
<ul class="dropdown">
<li>J'arrive à Paris</li>
<li>Impositions</li>
<li>Fonctionnement de la mairie</li>
<li>PLU</li>
<li>Emploi/Formation</li>
</ul>
</li>
<li>Nos actions<i class="fas fa-angle-down"></i>
<ul class="dropdown">
<li>Décryptage des conseils municipaux</li>
<li>Étude des budgets</li>
<li>Actualités</li>
</ul></li>
<li><a id="search"><i class="fas fa-search"></i></a></li>
</ul>
</div>
</nav>
</header>
This seems so easy but it doens't work.
Thanks you,
Matthieu

Answer 1

You want to select only the ul with the id of nav-normal and use the child combinator CSS selector:
ul#nav-normal > li::after
You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
Note that I've altered the styling of the ::after elements to make then more easily visible
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>
Aide/Tutos/Astuces<i class="fas fa-angle-down"></i>
<ul class="dropdown">
<li>J'arrive à Paris</li>
<li>Impositions</li>
<li>Fonctionnement de la mairie</li>
<li>PLU</li>
<li>Emploi/Formation</li>
</ul>
</li>
<li>
Nos actions<i class="fas fa-angle-down"></i>
<ul class="dropdown">
<li>Décryptage des conseils municipaux</li>
<li>Étude des budgets</li>
<li>Actualités</li>
</ul>
</li>
<li><a id="search"><i class="fas fa-search"></i></a></li>
</ul>
</div>
</nav>
</header>