Как сделать меню для сайта похожее на wildberries?

Question

[filippokk]

Есть сайт (на локалке) нужно сделать так что бы когда наводишь курсор на элемент меню он становился активным и оставался активным когда список подкатегорий выводиться. Что бы по понятнее было, нужно такую же работы меню как на https://www.wildberries.ru/ Я понимаю что это js и свойства mouseover и mouseout, но как сделать не знаю. Подскажите пожалуйста.

Answer 1

[Finnish]

Я не сделаю открытия, когда скажу, что это сделано без JS, на чистом CSS с использованием :hover. Примерно так:

<span class="menu-item">
  О компании
  <div class="submenu">
    Основана вчера, продаём телефоны, звоните...
  </div>
</span>
<style>
  .menu-item > .submenu { display: none; }
  .menu-item:hover > .submenu { display: block; }
</style>

Comments

[filippokk]

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

[Finnish]

filippokk: дополнил ответ.

[filippokk]

Finnish: большое спасибо, я просто немного отстал видимо и не с первого раза понял, что .menu-item:hover > .submenu вот так наследуются свойства в css

Answer 2

[Александр Таратин]

https://jsfiddle.net/QW01_01/q0yt211p/9/

Comments

[filippokk]

То что надо, но я разобраться не могу где код js, и как этот сайт вообще работает? Прям как делитант

[Sanan Yuzb]

Там нет js, все на css