0

Есть меню, в котором при наведении на элемент, содержащий выпадающий список, должен появляться по центру треугольничек, который абсолютно спозиционирован относительно родительского. картинка Вопрос: как разместить этот треугольник ровно по центру для любого по ширине пункта одинаково во всех браузерах (задать 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>

4 ответа 4

3
ul.dropdown-menu {
  background-color: white;
  overflow: hidden;
  opacity: 0;
  margin:0;
  text-align:center;
}

Нужно лишь добавить margin: 0 и все будет по центру

.navbar-nav>li.dropdown:hover:after {
  position: absolute;
  content: "";
  top: 50px;
  z-index: 9999;
  padding: 0;
  display: inline-block;
  width: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  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');
}

И тут добавить left: 0; right: 0, margin:0 auto;

5
  • margin: 0 auto - это центрирование, а margin: 0 - нет.
    – Qwertiy
    18 окт 2016 в 13:04
  • @Qwertiy забыл добавить text-aling: center; 18 окт 2016 в 13:05
  • 1
    А text-aling: center с absolute'ом без текста - уже не очень кроссбраузерно.
    – Qwertiy
    18 окт 2016 в 13:07
  • @Qwertiy margin: 0; исключительно убрать отступ ul списка, а text-align: center; центрировать текст, плохая кроссбраузерность? 18 окт 2016 в 13:11
  • Тьфу.. Я несколько запутался. Я думал, absolute inline-block центрируется через text-align, а у тебя всё-таки margin: 0 auto.
    – Qwertiy
    18 окт 2016 в 13:48
1

добавить для .navbar-nav>li.dropdown:hover:after

.navbar-nav>li.dropdown:hover:after{
  left: 50%;
  margin-left: -16px;
}
4
  • не нравится мне такой вариант с left: 50%; margin-left: -16px; - вы уверены, что это будет кроссбраузерно, адаптивно и замене, к примеру шрифта или увеличении его не кегель ничего не сдвинется?
    – Вася
    18 окт 2016 в 12:53
  • @Вася да уверен - это кроссбраузерный вариант, также шрифт не играет роли в данном случае
    – soledar10
    18 окт 2016 в 12:59
  • и все же я доверяю, когда сам браузер высчитывает, а не сам определяешь на глаз. стоит захотеть поиграться с размерами треугольника и уже каждый раз придется его попиксельно двигать-смотреть, не криво ли расположен
    – Вася
    18 окт 2016 в 13:06
  • 1
    расчет для margin-left = -(width triangle/2);
    – soledar10
    18 окт 2016 в 13:07
1

Смещение происходит на половину ширины треугольника. Вернуть "на место" можно добавив вот это

.navbar-nav>li.dropdown:hover:after {
    transform: translateX(-50%);
}

PS. Для устаревших версий браузеров потребуются префиксы

2
  • а для совсем устаревших (ie8) это, к сожалению, не сработает..
    – Вася
    18 окт 2016 в 12:55
  • @Вася Это да, но я бы на него не расчитывал 18 окт 2016 в 13:01
1

Вот пример:

 ..li > a:after {
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    line-height: 0;
    position: absolute;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 0px solid #ffffff;
    width: 0px;
    height: 0px;

За расположение по центру отвечает эта часть: margin: 0 auto; Надеюсь поможет этот пример!

1
  • да, полезный, но не полный - вверху самый верный ответ
    – Вася
    18 окт 2016 в 12:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.