triangle pointing arrow for popup menu - html

Question

I have a menu (sidebar), when you hover over the corresponding menu item, a second column with a submenu is displayed. I need to make a triangle-pointer, as in the picture (in the question). I can’t understand how this can be done. Share your opinion, please. Thank!
https://i.stack.imgur.com/su151.png
.main {
font-family: PT Sans;
position: relative;
display: flex;
flex-direction: row;
min-height: 100%;
}
.main_menu {
display: flex;
flex-direction: column;
width: auto;
background-color: #38618C;
padding: 50px 0 0 0;
z-index: 1000;
}
.main_menu_content {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
width: 100%;
}
.main_menu_content_list {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 700px;
width: 250px;
}
.main_menu_content_list li {
list-style-type: none;
}
.main_menu_content_list a {
display: flex;
flex-direction: column;
align-items: center;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
color: #D7DFE8;
text-decoration: none;
}
.main_menu_content_list_sub_block {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 55px;
}
.main_menu_content_list_submenu {
justify-content: center;
position: absolute;
padding: 0;
margin: 0;
left: 100%;
height: 100vh;
background-color: #F0F6F8;
box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.25);
top: -50px;
pointer-events: none;
opacity: 0;
transition: all linear 0.1s 0s;
width: 250px;
}
.main_menu_content_list li:hover .main_menu_content_list_submenu {
opacity: 1;
pointer-events: auto;
}
.main_menu_content_list_submenu_popup li:first-child {
margin: 50px 0 0 0;
}
.main_menu_content_list_submenu_popup li:not(:first-child) {
margin: 10px 0 0 0;
}
.main_menu_content_list li:hover > .main_menu_content_list_submenu {
display: flex;
}
.main_menu_content_list_submenu_popup a {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
color: #38618C;
}
.main_menu_content_list_submenu_popup a:hover {
color: #38618C;
text-decoration: underline;
}
.main_menu_content_list_submenu_popup a:active {
color: #FF5964;
}
.main_content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 100%;
height: 100%;
}
<div class="main">
<div class="main_menu">
<div class="main_menu_content">
<ul class="main_menu_content_list">
<li><a href="">
<div class="main_menu_content_list_int"></div>Интернет
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Дополнительные услуги</li>
<li>Настройка соединения</li>
<li>Подключенные дома</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_tv"></div>Телевидение
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Новости</li>
<li>Акции</li>
<li>Аналоговое ТВ</li>
<li>Оборудование</li>
<li>Настройка каналов</li>
<li>Подключенные дома</li>
<li>Документы</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Обслуживание</li>
<li>Установка</li>
<li>Заявка на ремонт</li>
<li>Подключение</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_tvr"></div>ТВ Реклама
</a></li>
<li><a href="">
<div class="main_menu_content_list_intb"></div>Интернет для бизнеса
</a></li>
<div class="main_menu_content_list_sub_block">
<li>Оплата</li>
<li>О компании</li>
</div>
<li><a href="">
<div class="main_menu_content_list_sub_account"></div>Личный кабинет
</a></li>
</ul>
</div>
</div>
<div class="main_content">
</div>
</div>

Answer 1

Use this css
.main_menu_content_list > li.haveSubmenu > a:after{
content: '';
position: absolute;
border: solid 10px;
border-color: transparent #F0F6F8 transparent transparent;
right: 0;
opacity: 0;
}
.main_menu_content_list > li.haveSubmenu:hover > a:after{
opacity: 1;
}
.main {
font-family: PT Sans;
position: relative;
display: flex;
flex-direction: row;
min-height: 100%;
}
.main_menu {
display: flex;
flex-direction: column;
width: auto;
background-color: #38618C;
padding: 50px 0 0 0;
z-index: 1000;
}
.main_menu_content {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
width: 100%;
}
.main_menu_content_list {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 700px;
width: 250px;
}
.main_menu_content_list li {
list-style-type: none;
}
.main_menu_content_list > li.haveSubmenu > a:after{
content: '';
position: absolute;
border: solid 10px;
border-color: transparent #F0F6F8 transparent transparent;
right: 0;
opacity: 0;
}
.main_menu_content_list > li.haveSubmenu:hover > a:after{
opacity: 1;
}
.main_menu_content_list a {
display: flex;
flex-direction: column;
align-items: center;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
color: #D7DFE8;
text-decoration: none;
}
.main_menu_content_list_sub_block {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 55px;
}
.main_menu_content_list_submenu {
justify-content: center;
position: absolute;
padding: 0;
margin: 0;
left: 100%;
height: 100vh;
background-color: #F0F6F8;
box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.25);
top: -50px;
pointer-events: none;
opacity: 0;
transition: all linear 0.1s 0s;
width: 250px;
}
.main_menu_content_list li:hover .main_menu_content_list_submenu {
opacity: 1;
pointer-events: auto;
}
.main_menu_content_list_submenu_popup li:first-child {
margin: 50px 0 0 0;
}
.main_menu_content_list_submenu_popup li:not(:first-child) {
margin: 10px 0 0 0;
}
.main_menu_content_list li:hover > .main_menu_content_list_submenu {
display: flex;
}
.main_menu_content_list_submenu_popup a {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
color: #38618C;
}
.main_menu_content_list_submenu_popup a:hover {
color: #38618C;
text-decoration: underline;
}
.main_menu_content_list_submenu_popup a:active {
color: #FF5964;
}
.main_content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 100%;
height: 100%;
}
<div class="main">
<div class="main_menu">
<div class="main_menu_content">
<ul class="main_menu_content_list">
<li class="haveSubmenu"><a href="">
<div class="main_menu_content_list_int"></div>Интернет
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Дополнительные услуги</li>
<li>Настройка соединения</li>
<li>Подключенные дома</li>
</ul>
</div>
</li>
<li class="haveSubmenu"><a href="">
<div class="main_menu_content_list_tv"></div>Телевидение
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Новости</li>
<li>Акции</li>
<li>Аналоговое ТВ</li>
<li>Оборудование</li>
<li>Настройка каналов</li>
<li>Подключенные дома</li>
<li>Документы</li>
</ul>
</div>
</li>
<li class="haveSubmenu"><a href="">
<div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Обслуживание</li>
<li>Установка</li>
<li>Заявка на ремонт</li>
<li>Подключение</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_tvr"></div>ТВ Реклама
</a></li>
<li><a href="">
<div class="main_menu_content_list_intb"></div>Интернет для бизнеса
</a></li>
<div class="main_menu_content_list_sub_block">
<li>Оплата</li>
<li>О компании</li>
</div>
<li><a href="">
<div class="main_menu_content_list_sub_account"></div>Личный кабинет
</a></li>
</ul>
</div>
</div>
<div class="main_content">
</div>

Answer 2

You can draw the arrow with border properties and add to the corresponding submenu popup ::before for styling. Then, adjust the position of the arrow with top property for each submenu.
/* Add the following CSS configuration */
li:first-child ul.main_menu_content_list_submenu_popup::before {
top: 4.5rem;
}
li:nth-child(2) ul.main_menu_content_list_submenu_popup::before {
top: 11rem;
}
li:nth-child(3) ul.main_menu_content_list_submenu_popup::before {
top: 18rem;
}
ul.main_menu_content_list_submenu_popup::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
left: -0.5rem;
border-width: .5rem .5rem .5rem 0;
border-right-color: #F0F6F8;
}
.main {
font-family: PT Sans;
position: relative;
display: flex;
flex-direction: row;
min-height: 100%;
}
.main_menu {
display: flex;
flex-direction: column;
width: auto;
background-color: #38618C;
padding: 50px 0 0 0;
z-index: 1000;
}
.main_menu_content {
display: flex;
flex-direction: column;
position: sticky;
top: 50px;
width: 100%;
}
.main_menu_content_list {
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 700px;
width: 250px;
}
.main_menu_content_list li {
list-style-type: none;
}
.main_menu_content_list a {
display: flex;
flex-direction: column;
align-items: center;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 23px;
color: #D7DFE8;
text-decoration: none;
}
.main_menu_content_list_sub_block {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 55px;
}
.main_menu_content_list_submenu {
justify-content: center;
position: absolute;
padding: 0;
margin: 0;
left: 100%;
height: 100vh;
background-color: #F0F6F8;
box-shadow: 5px 0px 20px rgba(0, 0, 0, 0.25);
top: -50px;
pointer-events: none;
opacity: 0;
transition: all linear 0.1s 0s;
width: 250px;
}
.main_menu_content_list li:hover .main_menu_content_list_submenu {
opacity: 1;
pointer-events: auto;
}
.main_menu_content_list_submenu_popup li:first-child {
margin: 50px 0 0 0;
}
.main_menu_content_list_submenu_popup li:not(:first-child) {
margin: 10px 0 0 0;
}
.main_menu_content_list li:hover > .main_menu_content_list_submenu {
display: flex;
}
.main_menu_content_list_submenu_popup a {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
color: #38618C;
}
.main_menu_content_list_submenu_popup a:hover {
color: #38618C;
text-decoration: underline;
}
.main_menu_content_list_submenu_popup a:active {
color: #FF5964;
}
.main_content {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 100%;
height: 100%;
}
/* Add the following CSS configuration */
li:first-child ul.main_menu_content_list_submenu_popup::before {
top: 4.5rem;
}
li:nth-child(2) ul.main_menu_content_list_submenu_popup::before {
top: 11rem;
}
li:nth-child(3) ul.main_menu_content_list_submenu_popup::before {
top: 18rem;
}
ul.main_menu_content_list_submenu_popup::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
left: -0.5rem;
border-width: .5rem .5rem .5rem 0;
border-right-color: #F0F6F8;
}
<div class="main">
<div class="main_menu">
<div class="main_menu_content">
<ul class="main_menu_content_list">
<li><a href="">
<div class="main_menu_content_list_int"></div>Интернет
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Дополнительные услуги</li>
<li>Настройка соединения</li>
<li>Подключенные дома</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_tv"></div>Телевидение
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Подключение</li>
<li>Новости</li>
<li>Акции</li>
<li>Аналоговое ТВ</li>
<li>Оборудование</li>
<li>Настройка каналов</li>
<li>Подключенные дома</li>
<li>Документы</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_video"></div>Видеонаблюдение,<br>домофон
</a>
<div class="main_menu_content_list_submenu">
<ul class="main_menu_content_list_submenu_popup">
<li>Обслуживание</li>
<li>Установка</li>
<li>Заявка на ремонт</li>
<li>Подключение</li>
</ul>
</div>
</li>
<li><a href="">
<div class="main_menu_content_list_tvr"></div>ТВ Реклама
</a></li>
<li><a href="">
<div class="main_menu_content_list_intb"></div>Интернет для бизнеса
</a></li>
<div class="main_menu_content_list_sub_block">
<li>Оплата</li>
<li>О компании</li>
</div>
<li><a href="">
<div class="main_menu_content_list_sub_account"></div>Личный кабинет
</a></li>
</ul>
</div>
</div>
<div class="main_content">
</div>
</div>