У меня есть структура, которая имеет раскрывающееся меню, которое расширяется на 100%, что означает, что li не может быть относительным.
Теперь я поместил span внутри тега привязки, и это, кажется, работает нормально, однако я не могу удалить последний дочерний элемент оранжевой полосы, и если я попытаюсь это сделать, он удалит все,
Так, как я могу удалить последнюю оранжевую полосу, не прерывая наведение ссылки на проект?
Вот кодовое окно: https://codepen.io/Aurelian/pen/vjzOyJ?editors=1010
HTML:
<ul class="site-nav-desktop__list">
<li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>home</span></a></li>
<li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>diensten</span></a></li>
<li class="site-nav-desktop__item"><a href="" class="site-nav-desktop__link"><span>over ons</span></a></li>
<li class="site-nav-desktop__item site-nav-desktop__item--dropdown">
<a href="" class="site-nav-desktop__link"><span>projecten</span></a>
<ul class="site-nav-desktop__dropdown-list">
<li><a href="#">wonem</a></li>
<li><a href="#">werken</a></li>
<li><a href="#">skyboxen</a></li>
<li><a href="#">horeca</a></li>
<li><a href="#">3d impressies</a></li>
<li><a href="#">Adeo Design</a></li>
</ul>
</li>
<li class="site-nav-desktop__item"><a href="#contact" class="site-nav-desktop__link"><span>contact</span></a></li>
</ul>
CSS / SCSS:
// ==========================================================================
// #Site Nav
// ==========================================================================
ul {
list-style: none;
}
%triangle-bottom {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
overflow:hidden;
bottom: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #f78f1e
}
.site-nav-desktop {
display: none;
width: 100%;
padding-left: 96px;
line-height: 5em;
&__item {
float: left;
margin-right: 1rem;
&--dropdown:hover .site-nav-desktop__link span::before {
@extend %triangle-bottom;
z-index: 9000;
right: 50%;
transform: translateX(50%);
}
&--dropdown:hover .site-nav-desktop__dropdown-list {
display: block;
}
}
&__link {
padding-right: 1rem;
display: block;
position: relative;
& > span {
position: relative;
}
& span::after {
content: "";
top: 50%;
transform: translateY(-50%);
position: absolute;
float: left;
width: 1px;
height: 17px;
margin-left: 1rem;
background-color: #f78f1d;
}
& > ul > li > a > span:last-of-type::after {
display: none;
}
}
&__dropdown-list {
background-color: #f78f1e;
position: absolute;
left: 0;
right: 0;
width: 100%;
text-align: center;
line-height: 3em;
display: none;
& li {
display: inline-block;
position: relative;
margin-right: .6rem;
&::after {
content: "";
top: 50%;
transform: translateY(-50%);
position: absolute;
float: left;
width: 1px;
height: 17px;
right: 0;
background-color: white;
}
&:last-child::after {
display: none;
}
}
& a {
display: block;
padding-right: 1rem;
}
}
}
.site-social {
float: right;
&__item {
display: inline-block;
}
}