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

Question

[massef]

Раскрытие меню происходит через hover, при такой реализации на мобильном устройстве при тапе на основной пункт происходит переход по ссылке. Как правильно верстать такое меню?

Answer 1

[Иван]

На мобильных такое меню дублируются на обычное.

Answer 2

[iBird Rose]

на мобильных убрать ховер и сделать по клику. тобишь первый клик открывает меню. второй клик уже при открытом меню - переходит по ссылке

Answer 3

[xmoonlight]

1. https://knackforge.com/blog/karalmax/how-deal-hove...
2. stackoverflow.com/questions/2851663/how-do-i-simul...

Списочек media-query (как дополнение):

@media (pointer:coarse) {
    /* Primary Input is a coarse pointer device such as touchscreen or XBox Kinect etc */
}
 
@media (pointer:fine) {
    /* Primary Input is a fine pointer device such as a mouse or stylus */
}
 
@media (hover:none) {
    /* Primary Input doesn't respond to hover at all, even partially (ie: there is no pointing device) */
}
 
@media (hover:on-demand) {
    /* Primary Input responds to hover only via emulation, such as touch screen devices */
}
 
@media (hover:hover) {
    /* Primary Input responds to hover fully, such as a mouse or a Nintendo Wii controller */
}