Есть ли способ сделать так, чтобы плагин superfish был на той же высоте, что и меню?

Я использую плагин jquery superfish. Я пытаюсь сделать так, чтобы второе подменю было той же высоты, что и первое подменю. Я также хочу расположить второе подменю прямо под меню, как показано на скриншоте. Но я не знаю, как это сделать. Я пытался сделать родительский элемент display: contents, но если я это сделаю, все просто перестанет работать введите описание изображения здесь


person Christian    schedule 15.12.2019    source источник


Ответы (1)


Это можно решить, добавив сразу два css-правила.

По умолчанию все подменю (т.е. <ul>s) абсолютно позиционированы относительно родительского элемента <li>. Итак, чтобы расположить подменю третьего уровня по отношению к меню верхнего уровня, отключите position: relative; на всех <li> второго уровня:

.sf-menu ul li {
    position: unset;
}

Чтобы второе подменю было по крайней мере таким же высоким, как первое подменю, вы можете установить min-height во втором подменю ul:

.sf-menu ul li ul {
    min-height: 100%;
}

Возможно, вы захотите установить цвет фона в этом правиле css или выполнить дальнейшую стилизацию в соответствии с вашими потребностями.

person kastenbutt    schedule 15.12.2019
comment
спасибо, что он работает сейчас, и как мне разместить их на одной высоте, как будто они были одним блоком? - person Christian; 15.12.2019
comment
Я не уверен, что понимаю, что вы имеете в виду. Высота второго подменю зависит от количества элементов списка и их высоты. Не могли бы вы немного лучше объяснить, что вам нужно? - person kastenbutt; 15.12.2019
comment
В случае, если первый ‹ul› будет иметь 5 элементов, а второй ‹ul› (его дочерний элемент) имеет 3 элемента, у нас будет 5–3. высота первого ‹ul› будет выше, чем второго, я хочу, чтобы высота второго ‹uls› соответствовала высоте родителя - person Christian; 15.12.2019