Всплывающее меню подменю не отображается

Question

надеюсь, это будет простой ответ для некоторых из вас, ветеранов CSS.

Я разрабатываю сайт для клиента. Для удобства чтения я просто дам вам ссылку на веб-сайт и соответствующую страницу css. HTML CSS

Я пытаюсь сделать подменю всплывающим справа от главного меню, когда вы прокручиваете "Star Quartz Grout". Мой текущий CSS явно не верен, и я мог бы использовать некоторые рекомендации.

ul#subNav {display: none; width: 134px; }
li:hover ul#subNav, li.over ul#subNav {display: inline-block; position: absolute; top: 0px; left: 134px; }

Я предполагаю, что это работает, но скрыто за остальной частью страницы. Хотя я могу ошибаться. Это довольно сложно подтвердить, даже с Chrome "Inspect Element" (кстати, очень хорошая вещь). Это, наверное, какая-то глупая ошибка. В любом случае, спасибо заранее. Я немного новичок в CSS.

Answer 1

Вы можете попробовать это:

ul#subNav ul
{
display: none;
}

ul#subNav li:hover ul
{
display:block;
}

Но будьте осторожны, поскольку ваша зона "li" меньше самой ссылки.

Я сделал это на этом сайте: Spirit Of Polo (наведите курсор на корзину). Будьте осторожны, этот вид эффекта (зависания) не будет виден на устройствах с сенсорным экраном (поскольку зависание невозможно, если вы об этом думаете)