подпункты popup меню по центру

Question

У меня есть сайдбар, с подпунктами меню. Данные подпункты всегда отображаются вверху выезжающей "плашки". Подскажите пожалуйста, как сделать, что бы подпункты меню отображались по центру, относительно относительно высоты своего родительского пункта меню из сайдбара. Как на картинке. Спасибо.

.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: 1;
  user-select: none;
}

.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;
  justify-content: center;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  color: #D7DFE8;
  text-decoration: none;
}

.main_menu_content_list_submenu {
  justify-content: center;
  position: absolute;
  padding: 0;
  margin: 0;
  left: 100%;
  height: 100vh;
  background-color: #F0F6F8;
  box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.25);
  top: -50px;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: all linear 0.1s 0s;
  width: 250px;
}

.main_menu_content_list_submenu_popup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.main_menu_content_list > li.main_menu_content_list_arrow > a:after{
  content: '';
  position: absolute;
  border: solid 10px;
  border-color: transparent #F0F6F8 transparent transparent;
  right: 0;
  opacity: 0;
}

.main_menu_content_list > li.main_menu_content_list_arrow:hover > a:after{
  opacity: 1;
}

.main_menu_content_list li:hover .main_menu_content_list_submenu {
  opacity: 1;
  pointer-events: auto;
  display: flex;
}

.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%;
  min-height: 100%;
}

<div class="main">
<div class="main_menu">
            <div class="main_menu_content">
                <ul class="main_menu_content_list">
                    <li class="main_menu_content_list_arrow"><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><a class="" href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><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><a class="" href="">Подключение</a></li>
                                <li><a href="">Новости</a></li>
                                <li><a href="">Акции</a></li>
                                <li><a href="">Аналоговое ТВ</a></li>
                                <li><a href="">Оборудование</a></li>
                                <li><a href="">Настройка каналов</a></li>
                                <li><a href="">Подключенные дома</a></li>
                                <li><a href="">Документы</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="main_menu_content_list_arrow"><a href="/content/video.html">
                            <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><a class="" href="">Подключение</a></li>
                                <li><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="/content/rek.html">
                            <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><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></li>
                    </div>
                    <li class="main_menu_content_list_arrow"><a href="">
                            <div class="main_menu_content_list_sub_account"></div>Личный кабинет
                        </a>
                        <div class="main_menu_content_list_submenu">
                            <ul class="main_menu_content_list_submenu_popup">
                                <li><a href="">Интернет</a></li>
                                <li><a href="">Телевидение</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="main_content">
        </div>
</div>

БЛОГ НА HUSL

подпункты popup меню по центру

Ответы (0 шт):