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

Question

[Сергей Горячев]

Вечно у меня с этими пунктами меню беда.
https://jsfiddle.net/e9xrmydw/1/ переписал нахрен говнокод
Как исправить, чтобы вложенный пункт не пропадал при наведении на него мышью.
То есть, когда убираешь фокус с arrow) Пункт Прайс)

Answer 1

[Дмитрий Иванов]

Если тебя устраивает тот факт что при наведении на родительский элимент-текст внутри родительского элемента не видно, то нужно просто дочерний элемент(тот самый выпадающий список) Поднять выше. Тот самый разрыв в пару пикслелей видишь?! вот когда курсор в него попадает-теряется фокус. Ну вообще конечно нужно было бы все переделать в человеческий вид. Это не код а кошмар. Можно было бы обойтись без js на мой взгляд))

Comments

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

И как же сделать без js? И чтобы это корректно работало на тач устройствах.

<li class="menu__item">
     <a href="#" class="menu__link menu__link--arrow" data-name="Прайс-лист">Прайс-лист</a>
     <ul class="submenu">
          ....

[Сергей Горячев]

Да, переписать код было проще.

[Дмитрий Иванов]

Сергей Тутуков: Так, а какая разница тач или нет.На таче нет понятия "наведения курсора". Там есть только клик. Вообще для таких целей пишется-мобильное меню. Ну, а по поводу переписать. Тот же hover)) В нэте полно пример выпадающего меню без js ))

[Flur]

Да и верстку с дизайном тоже нормальным не назовешь

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

Дмитрий Иванов: Все правильно, нет события наведения.
Только не совсем понятно, как теперь открыть второй уровень меню не перейдя по ссылке без js? Те при таче сработает событие hover и переход по ссылке.

Почему я это пишу, потому что огромное количество сайтов делает

<li class="menu__item">
     <a href="#" class="menu__link menu__link--arrow" data-name="Прайс-лист">Прайс-лист</a>
     <ul class="submenu">
          ....

через css. Эту структуру невозможно сделать без js.

[Сергей Горячев]

Kerim Aslanovich: А ты обладаешь телепатическими способностями и видишь дизайн, который есть на самом деле? Или тупо судить по куску кода, который был выложен чисто для оценки проблемы? В общем, более дебильного замечания я не встречал еще)

[Дмитрий Иванов]

Сергей Тутуков: Ну я писал коммент про конкретный случай.Когда вложенность одна.+Нужно исходить из следующих вариантов.1.Будут ли родительские элементы являться ссылкой сами по себе или же ссылки будут только у дочерних. Второй вариант какая будет вложенность категорий.Исходя из этого. При первом варианте-если родетель не является ссылкой,то при клике с мобильного устройства-сработает ховер и соответсвенно откроются дочерние элементы.Второй вариант.Если вложенность небольшая и нужно именно без js сделать работающий вариант, при том что сам родитель тоже является ссылкой.Можно в родителький блок вставить иконку(плюс к примеру).Если у родительского элимента достаточно места(в плане отступов).То при нажатии на menu__item Сработает ховер и иконка замениться на минус. Если человек конечно специально не будет нажимать именно на ссылку которая находиться в li. Но опять же, это все "костыли и извращения" что на css что на js.Если конечно на js не писать что-то в стиле-если он один раз нажал на menu__item, то покажи дочерние элименты.Если второй раз нажал, то перейди по ссылке...это извращение. Тут просто речь про адаптив не велась. Для этих целей я еще раз повторюсь-делается адаптивное меню.Без ховера.И на том же чистом css это все можно реализовать))да я не спорю что на js можно красивее, против него я ничего не имею. Речь изначально шла про пример в котором можно было на css прописать ховер. А не корячиться с js))

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

Дмитрий Иванов: все абсолютно верно))
но лучше всегда учитывать такие моменты, я постоянно на телефоне перехожу по ссылке...бесит))
PS. прошу прощение, что столько времени отнял на писанину.

[Дмитрий Иванов]

Сергей Тутуков: Ну от этого никуда не денешься. Тут проблема не в том, на чем написано меню, а в том - кто хозяин сайта. Нормальный владелец не допустит такого неудобства))

[Flur]

Sergey Goryachev: Вопросы уровня: Школота+

[Сергей Горячев]

Kerim Aslanovich: В жопу иди, короче)

[Flur]

Sergey Goryachev: Ты извини за критику, просто когда вижу кривые интерфейсы - пукан горит ярче солнца

Answer 2

[Алексей Скляров]

У вас не получается из-за того, что вы не знаете где у вас вообще область hover
.menu__item:hover .submenu {display:block;}
Это все, что нужно для того, чтобы при наведении ссылку из подменю, основное не убиралось. Почему? Потому что при наведении на подменю вы все равно в зоне .menu__item, за счет вложенности подменю в эту ссылку.

И никакой JS не нужен:

https://jsfiddle.net/e9xrmydw/3/