Как сделать многоуровневое меню как на картинке?

Question

[krll-k]

Answer 1

[Юрий Молотов]

<ul class="mainmenu">
  <li>Unlimited
    <ul>
      <li>Prime</li>
      <li>Learn</li>
    </ul>
  </li>
  <li>MP3s
    <ul>
      <li>MP3</li>
      <li>Music</li>
    </ul>
  </li>
</ul>

css:

.mainmenu ul{display:none; position:absolute;}
.mainmenu li:hover ul{display:block;}

- При наведении на пункт 1 уровня отображаем зафиксированные дочерние подпункты.

Comments

[krll-k]

Ну а позиционировать каким образом, не все так просто, и думаю css такого не может

[Юрий Молотов]

position:absolute; - блоки ul будут накладываться один на другой.

[krll-k]

Юрий Молотов: codepen.io/krll/pen/YXqxjJ

[Юрий Молотов]

Ну собственно да, по-моему доработать и будет оно.

nav {position: relative;width: 300px;}
.mainmenu ul{display:none; position:absolute;}
.mainmenu li:hover ul{ display:block;top:0;left: 150px;}
.mainmenu li:hover{color:red;cursor:pointer; font-weight:700;}
.mainmenu ul{color:black;font-weight:100;}
ul li {list-style-type: none;padding: 20px;}

Answer 2

[brevis]

Вчера на codyhouse запостили пример/туториал: codyhouse.co/gem/mega-dropdown

Answer 3

[reifter]

Написать в поиске multi level menu js и выбрать из обилия найденных ответов понравившийся вариант.

Comments

[krll-k]

reifter habrahabr.ru/post/171905 прочти это, и ты поймешь о чем я спрашиваю

[reifter]

Кстати читал эту статью :) А вообще забавно, спрашивать, когда уже у самого есть ссылка на статью, где все описано и даже есть ссылка на готовый плагин, а хотя почему странно, для вас это нормально, сами задаете вопросы, сами на них отвечаете :)

Answer 4

[krll-k]

<button>
<ul>
  <li>
    <a>Unlimited Instatnt Videos</a>
  </li>
  <li>
    <a>MP3s & Cloud Player</a>
    <div>content</div>
  </li>
  <li>level 1</li>
</ul>

как то так?

Answer 5

[Михаил Шувалов]

Недавно про именно амазоновское меню была статья на хабре - m.habrahabr.ru/post/171905 там же в конце есть ссылка на готовый плагин jquery

Answer 6

[Дмитрий Шинкарь]

Для ленивых - очень быстро делается через Bootstrap =)