Есть меню, в котором при наведении на элемент, содержащий выпадающий список, должен появляться по центру треугольничек, который абсолютно спозиционирован относительно родительского.
Вопрос: как разместить этот треугольник ровно по центру для любого по ширине пункта одинаково во всех браузерах (задать left в процентах не предлагать!) ? Сейчас он расположен со смещением относительно центра. фидл
ul {
list-style: none;
}
.nav {
background-color: #000;
min-height: 50px;
text-align: center;
}
.nav>li {
position: relative;
display: block;
float: left;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
color: white;
font-family: Arial;
font-size: 16px;
font-weight: 400;
line-height: 1.9;
text-decoration: none;
}
ul.dropdown-menu {
background-color: white;
overflow: hidden;
opacity: 0;
}
ul.dropdown-menu a {
display: inline-block;
color: #000;
text-decoration: none;
padding: 10px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
overflow: visible;
opacity: 1;
}
.navbar-nav>li:hover {
background-color: #ffd900;
}
.navbar-nav>li.dropdown:hover {
position: relative;
}
.navbar-nav>li.dropdown:hover:after {
position: absolute;
content: "";
top: 50px;
z-index: 9999;
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 13px 16px 0 16px;
border-color: #ffd900 transparent transparent transparent;
line-height: 0;
_border-color: #ffd900 #000000 #000000 #000000;
_filter: progid: DXImageTransform.Microsoft.Chroma(color='#000000');
}
<ul class="nav navbar-nav top-menu">
<li><a href="#">Главная</a>
</li>
<li class="dropdown"><a href="#">О нас</a>
<ul class="dropdown-menu">
<li><a href="#">О нас</a>
</li>
<li><a href="#">Контакты</a>
</li>
</ul>
</li>
<li><a href="#">Полезное</a>
</li>
</ul>