html - 子菜单滚动弹出不显示

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 (将鼠标悬停在购物车上)。注意，这种效果(悬停)在触摸屏设备上是看不到的(因为如果你想的话悬停是不可能的)