CSS li: парить, но я хочу, чтобы он был кликабельным

Question

Посмотрите на сайте www.sadrobotdevelopment.com пример того, о чем я говорю (лучше всего смотреть в chrome)

#menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}

Это CSS, который делает всплывающее меню, что я хочу выяснить, каксделать, это сделать его кликабельным, а также.Главным образом из-за того, что планшеты и смартфоны не имеют парения.Есть ли что-то в CSS, что может с этим справиться, или мне нужно посмотреть, как оптимизировать мой сайт для мобильного просмотра?

Answer 1

Если перед дочерним элементом UL есть ссылка, вы можете использовать псевдоклассы :focus и :active для ссылки в сочетании с комбинатором соседнего брата:

#menu LI > A:focus  + UL,
#menu LI > A:active + UL {
    opacity: 1;
    /*...*/
}

Answer 2

Нет способа добиться событий клика с помощью чистого CSS. Вы можете подключить обработчик щелчков JavaScript, чтобы добавить «активный» класс к вашему элементу и использовать CSS в дополнение.