Есть подменю, где в вёрстке используется треугольник на css. Проблема в том что его прозрачные границы "закрывают" ссылки в подменю. Есть выход из этой ситуации? Может по-другому треугольник можно нарисовать?
.menu__item {
display:inline-block;
width: 100px;
height: 30px;
background-color:red;
text-align:center;
}
.menu__item-link {
display: inline-block;
width: 100%;
height: 100%;
}
.menu__item-activ{
position:relative;
}
.menu__item-activ:after {
}
.submenu {
position: absolute;
background-color:#efefef;
}
.submenu:before {
content: '';
position: absolute; /* Абсолютное позиционирование */
left: 0;
top:0;
border: 50px solid transparent; /* Прозрачные границы */
border-top: 10px solid green; /* Добавляем треугольник */
}
<ul class="menu__list">
<li class="menu__item"><a href="" class="menu__item-link">Home</a></li>
<li class="menu__item menu__item-activ">
<a href="" class="menu__item-link">About</a>
<ul class="submenu">
<li class="submenu-item"> <a href="" class="submenu-link">submenu1</a> </li>
<li class="submenu-item"><a href="" class="submenu-link">submenu2</a></li>
<li class="submenu-item"><a href="" class="submenu-link">submenu3</a></li>
</ul>
</li>
<li class="menu__item"><a href="" class="menu__item-link">Catalog</a></li>
</ul>