Additional Notes:
The number returned by dimensions-related APIs, including .offset(), may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
.wrapper {
background-color: pink;
height: 200px;
width: 800px;
}<div class="wrapper">
<ul class="menu">
<li>пункт 1
<ul class="submenu">
<li>подпункт 1</li>
<li>подпункт 2</li>
<li>подпункт 3</li>
</ul>
</li>
<li>пункт 2
<ul class="submenu">
<li>подпункт 4</li>
<li>подпункт 5</li>
<li>подпункт 6</li>
</ul>
</li>
<li>пункт 3
<ul class="submenu">
<li>подпункт 7</li>
<li>подпункт 8</li>
<li>подпункт 9</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
<li>пункт 4
<ul class="submenu">
<li>подпункт 10</li>
<li>подпункт 11</li>
<li>подпункт 12</li>
</ul>
</li>
</ul>
</div>.wrapper {
background-color: pink;
margin: 0;
padding: 0;
height: 200px;
width: 500px;
text-align: center;
}
ul.menu>li {
display: inline-block;
}
ul.menu>li:not(:first-child):before {
content: '•';
margin: 0 10px;
font-size: 14px;
}
ul.submenu {
position: absolute;
display: none;
}
ul.menu>li:hover ul.submenu {
display: block;
}
Как я понимаю он там не зря.
Возможно логика там такая:
Пока пунктов меню мало и они все влезают в одну строчку, этот row-divider отсутствует (полностью отсутствует в DOM).
Как только какой-то элемент перескочил на новую строчку, JS чекает высоту контейнера топ-меню и она, уже, очевидно, больше чем высота одного li.
Тогда JS создаёт li class: "row-divider".
И в таком случае у нас вёрстка принимает вид:
И уже тут JS идёт к этому роу-девайдер + 1 и у него меняет стили.
Возможно это как-то можно и нужно оптимизировать.
Вы вроде спец по JS, могли бы помочь с написанием кода?)
Спасибо!=)