Всем привет! Вчера столкнулся с такой проблемой, что у меня сломалась вёрстка, долго не мог понять почему, копал-копал и наконец-то докопался до истины и смог это воспроизвести. У меня есть горизонтальное выпадающее меню. Но в некоторых случаях выпадающие подменю появляется справа от блока, на который наводишь, а не снизу.
Я буду очень благодарен, если кто-то сможет объяснить из-за чего такое вообще происходит. Ниже 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
Проверил данный код в паре браузеров:
- Google Chrome 63.0.3239.84: хороший вариант - подменю снизу, плохой вариант - подменю справа.
- Firefox 57.0.2: оба варианта - подменю справа.
- Internet Explorer 11.726.15063.0: оба варианта - подменю справа.