Как задать ul'у ширину по его контенту?

Question

[tvsjke]

Как мне сделать заполнение списка элементами в длину, при этом с max-width ?
Вот так prnt.sc/ddjkfn

Структура (урезанно) такая:

<ul class="dropdown-menu">
   <li>
      <a></a>
         <ul class="sub-menu">
             <li class="sub">
                 <a></a>
             </li>                          
         </ul>
    </li>
</ul>

.dropdown-menu >li:hover ul.sub-menu{
    display:inline-block;
}

ul.sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #F4F4F5;
    list-style: none;
    max-width: 800px;
    height: auto;
}

ul.sub-menu > li {
    display: inline-block;
}

И выводится вот так (получается, ширина ul по ширине самого длинного li):
prntscr.com/ddjad9

Буду очень благодарен за помощь

Comments

[Евгений Вольф]

Можете попробовать задать ему display: table; а вложенным li'шкам - display: table-row; (а вложенным в li элементам - display: table-cell;) и дополнительно запретить переносы строк (white-space кажетстя), тогда текст в них будет всегда в одну строчку.

[tvsjke]

Евгений Вольф: но ведь display: table-row будет выводить мне каждый li с новой строки (так и есть) ? Мне же нужно, наоборот, в одну(несколько) строку.

[Сергей Тутуков]

tvsjke: А если hover на втором варианте главного меню? Выглядеть будет также или submenu сместиться на позицию активного меню?

[Евгений Вольф]

tvsjke: если в одну строку - то просто display: table-cell у li'шек, они станут ячейками и в одну строку. Можно ещё с помощью flex-box'а их позиционировать.

[tvsjke]

Сергей Тутуков: Сместится. Но если убрать у родительского li position:relative, то нет

[tvsjke]

Евгений Вольф: а как это с помощью флекс-бокса сделать, не подскажете ? вариант с table-cell работает, но мне не нравится

[Евгений Вольф]

tvsjke: мне не сложно написать "готовое" решение, но думаю, Вам самостоятельно и проще и полезнее будет подобрать вариант на выбор, подробности про флекс тут - css.yoksel.ru/flexbox

Суть в кратце такая. У родительского элемента Вы выставляете dispya: flex; у дочерних - соответствующие параметры отображения. Но мне кажется, если вариант с таблицей работает как надо - то вполне можно остановиться на нем.

[tvsjke]

Евгений Вольф: я, кстати, разбирался с ним уже. Вся суть сводится к тому, что flex адаптивно растягивает содержимое по родителю. Мне же нужно наоборот - растянуть родителя по содержимому, при это соблюдая условие max-width. Первое условие достигается display:inline-flex для родителя, но если указать max-width, то будет резаться ширина дочерних элементов, при этом переноситься на другую строку они не будут.

[Евгений Вольф]

а у дочерних, нельзя указать max-width? (я не пробовал ни разу)

[tvsjke]

Евгений Вольф: Наверное, можно. Но у меня есть конкретная задача: есть содержимое - допустим, 20 блоков 50х50px. И есть контейнер с max-width, скажем, 500px. Так вот эти блоки должны расположиться по 10 штук в ряд, всего 2 ряда. А если бы их было 1 штука, контейнер должен был быть по ширине 50px. А если 3 блока - 150px и т.д, то есть мин ширина - по контенту, макс - по max-width. Я не понимаю, как решить эту, казалось бы, простую задачу.

[Сергей Тутуков]

tvsjke: еслия правильно понял codepen.io/STutukov/pen/zoPdaR

[tvsjke]

Сергей Тутуков: спасибо за помощь, решение красивое, но это немного не то) Я выше написал то, что в общем нужно. Плюс, желательно, без JS. То есть задача то вроде тривиальная, по-любому её можно решить на чистом css

[Сергей Тутуков]

tvsjke: без js очень плохая практика делать многоуровневые меню. Например:

<li>
      <a href="test.html">Тест</a>
         <ul class="sub-menu">
             <li class="sub">
                 <a href="....">2 уровень</a>
             </li>                          
         </ul>
    </li>

На мобильных устройствах нет события hover. Ты хочешь увидеть 2 уровень навигации, кликаешь на пункт меню и у тебя произойдет hover и ПЕРЕХОД на test.html. Проверь сам)

[tvsjke]

Сергей Тутуков: да это понятно) просто думал, что именно эту задачу ( растягивание родителя по ширине контента с ограничением в max-width) можно решить чисто на css.

Answer 1

[Полина Емельянова]

Может такой вариант на что то натолкнет.
codepen.io/emelyanova/pen/PbaEQK

Как-то про... min-width забыли немного.)))

Answer 2

[Saboteur_x86]

Столкнулся с аналогичной проблемой!
У родительского "ul" свойство min-width: 100%; перестало работать в MS Edge (в других браузерах норм).

Лечение оказалось несложным:
Родительскому "ul" заменил min-width: 100%; на min-width: max-content;
После чего выпадающий список меню стал корректно отображаться (по ширине содержимого) во всех браузерах включая MS Edge.