3

Всем привет! Вчера столкнулся с такой проблемой, что у меня сломалась вёрстка, долго не мог понять почему, копал-копал и наконец-то докопался до истины и смог это воспроизвести. У меня есть горизонтальное выпадающее меню. Но в некоторых случаях выпадающие подменю появляется справа от блока, на который наводишь, а не снизу.

Я буду очень благодарен, если кто-то сможет объяснить из-за чего такое вообще происходит. Ниже 2 примера с кодом: хороший вариант и плохой вариант.

Вёрстка чинится из-за того, что я добавил символ переноса строки (или любой другой символ) между элементом a и ul. Для меня это поведение очень непонятное и я хотел бы разобраться как можно избежать подобных ситуаций.

.menu {
  text-align: center;
}

.menu ul {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu ul:after {
  content: '';
  display: table;
  clear: both;
}

.menu > ul > li {
  text-align: left;
  float: left;
  position: relative;
}

.menu li ul {
  position: absolute;
  visibility: hidden;
  opacity: 0; 
}

.menu li ul li {
  position: relative;
}

.menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}
Хороший вариант:

<div class="menu">
  <ul>
    <li><a href="">Пункт 1-1</a>
      <ul>
        <li><a href="">Пункт 2-1</a></li>
      </ul>
    </li>
  </ul>
</div>

Плохой вариант:

<div class="menu">
  <ul>
    <li><a href="">Пункт 1-1</a><!--
      --><ul>
        <li><a href="">Пункт 2-1</a></li>
      </ul>
    </li>
  </ul>
</div>

UPDATE #1

Проверил данный код в паре браузеров:

  1. Google Chrome 63.0.3239.84: хороший вариант - подменю снизу, плохой вариант - подменю справа.
  2. Firefox 57.0.2: оба варианта - подменю справа.
  3. Internet Explorer 11.726.15063.0: оба варианта - подменю справа.

1 ответ 1

0

Покопал еще глубже. Разобрался. Проблема была в том, что у элемента .menu ul выставлен display: inline-block (нужен для корректного центрирования, с помощью text-align: center). Исправил данную проблему тем, что изменил способ центрирования.

Следующий пример работает во всех приведённых в вопросе браузерах для обоих вариантов.

.menu {
  float: left;
  left: 50%;
  position: relative;
}

.menu > ul {
  float: left;
  right: 50%;
  position: relative;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu ul:after {
  content: '';
  display: table;
  clear: both;
}

.menu > ul > li {
  text-align: left;
  float: left;
  position: relative;
}

.menu li ul {
  text-align: left;
  position: absolute;
  visibility: hidden;
  opacity: 0; 
}

.menu li ul li {
  position: relative;
}

.menu li:hover > ul {
  visibility: visible;
  opacity: 1;
}
<div class="menu">
  <ul>
  <li><a href="">Пункт 1-1</a>
    <ul>
      <li><a href="">Пункт 2-1</a></li>
    </ul>
  </li>
  </ul>
</div>

Ваш ответ

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

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