html - CSS :hover:after image blocking the a:hover (drop down menu)

Question

我目前有一个下拉菜单(侧面菜单)，#a 是链接，#b 是#a 悬停时打开的容器。

#b {display:none;}
#a:hover > #b {display:block;}
#b:hover {display:block;}

当我的菜单中的链接悬停时，上面的 CSS 实质上会打开相应的容器，然后如果容器本身 (#b) 悬停，则它会保持打开/显示。

这很好用...

但后来我决定添加一个箭头，这样当悬停链接时，箭头图像将指向容器。我用这个 CSS 这样做了:

.menuleft a:hover:after {  content: url(images/menuarrowright.png);  display: block;}

同样有效。

然而，当此图像 (content: url(images/menuarrowright.png);) 悬停时，#b 不显示。

有解决办法吗？

Answer 1

你总是可以设置

a:悬停{
背景:网址(图片/menuarrowright.png)；


然后玩定位。