I want to insert a triangle pseudo-element into the menu, but for some reason it doesn’t fit where it should, I want to do something like this:
.row {
padding: 0;
}
.container-fluid {
padding: 0;
margin: 0;
}
.top-nav_btn {
display: none;
width: 20px;
height: 20px;
background-color: transparent;
border: none;
font-size: 18px;
position: absolute;
right: 30px;
top: -80px;
}
.top-nav_btn ::hover {
cursor: pointer;
}
.top-nav {
background-image: url(../img/background/header-1440.svg);
position: relative;
background-size: 100%;
height: 104px;
background-repeat: no-repeat;
}
.logo-header_green {
position: relative;
margin: 21px;
width: 75px;
height: 75px;
}
.logo-footer_white {
width: 75px;
height: 75px;
}
.top-nav_menu {
list-style: none;
margin: 0;
padding: 31px 11px;
display: flex;
align-items: center;
position: relative;
}
.top-nav_menu a {
color: var(--active-text-color);
}
.top-nav_menu li {
margin-right: 45px;
}
.top-nav_menu li a {
text-transform: uppercase;
text-decoration: none;
font-weight: 700
}
.top-nav_menu li a::after {
content: '';
width: 100%;
height: 3px;
background-color: var(--active-block);
display: block;
transform: translateY(42px) scale(0);
transition: all 0.2s;
}
.top-nav_menu li a:hover {
text-decoration: none;
}
.top-nav_menu li a:hover::after {
transform: translateY(42px) scale(1);
}
.sub-menu a {
display: block;
padding: 16px 32px;
color: #000;
font-size: 15px;
line-height: 180%;
}
.sub-menu {
list-style: none;
position: absolute;
z-index: 99999;
top: 100%;
left: 0;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
background: #fff;
box-shadow: 0 0 17px rgba(178, 191, 204, .25);
}
.sub-menu li a::after {
display: none;
}
.menu-item-has-children {
width: 0;
border: 4px solid transparent;
border-bottom: none;
border-top-color: #8a8383;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: 5px;
}
.top-nav_menu .sub-menu {
display: none;
}
.top-nav_menu li:hover .sub-menu {
display: block;
}
.top-nav_contact {
list-style: none;
padding: 0;
display: flex;
}
.top-nav_contact a {
margin-right: 45px;
color: var(--active-text-color);
}
<div class="top-nav">
<div class="row justify-content-between align-items-center p-0 m-0">
<div class="col-md-6 p-0 m-0">
<ul id="top-nav_menu" class="top-nav_menu">
<li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-870"><a>Программы обучения</a>
<ul class="sub-menu">
<li id="menu-item-899" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-896 current_page_item menu-item-899"><a href="" aria-current="page">Повышение квалификации</a></li>
<li id="menu-item-900" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-900"><a href="">Переподготовка</a></li>
<li id="menu-item-901" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-901"><a href="">Подготовка</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I’ve already tried in different ways, but somehow I can’t do it, maybe I made a mistake somewhere in the selectors?