弹出菜单的三角形指向箭头

Question

我有一个菜单（边栏），当您将鼠标悬停在相应的菜单项上时，会显示带有子菜单的第二列。我需要制作一个三角形指针，如图（问题中）所示。我不明白这是怎么做到的。请分享您的意见。谢谢！

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><a href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></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><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>
                                <li><a href="">Документы</a></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><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                                <li><a href="">Подключение</a></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><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></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

使用这个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><a href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></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><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>
                                <li><a href="">Документы</a></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><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                                <li><a href="">Подключение</a></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><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></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

您可以绘制带有边框属性的箭头，并添加到相应的子菜单弹出窗口 ::before 以进行样式设置。然后，为每个子菜单用 top 属性调整箭头的位置。

/* 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><a href="">Подключение</a></li>
                                <li><a href="">Дополнительные услуги</a></li>
                                <li><a href="">Настройка соединения</a></li>
                                <li><a href="">Подключенные дома</a></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><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>
                                <li><a href="">Документы</a></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><a href="">Обслуживание</a></li>
                                <li><a href="">Установка</a></li>
                                <li><a href="">Заявка на ремонт</a></li>
                                <li><a href="">Подключение</a></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><a href="">Оплата</a></li>
                        <li><a href="">О компании</a></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>

弹出菜单的三角形指向箭头

triangle pointing arrow for popup menu

html

css

menu

popup