Currently, I have a dropdown menu (side menu) where #a represents the links and #b is the container that #a opens when hovered.
#b {display:none;}
#a:hover > #b {display:block;}
#b:hover {display:block;}
The CSS above allows the corresponding container to open when a link in the menu is hovered, and if the container itself (#b) is hovered, it remains open/displayed.
It works perfectly...
However, I decided to enhance it by adding an arrow so that when a link is hovered, an arrow image will point to the container. I achieved this with the following CSS:
.menuleft a:hover:after { content: url(images/menuarrowright.png); display: block;}
Once again, this works as intended.
Unfortunately, when hovering over this arrow image (content: url(images/menuarrowright.png);), #b is set to display:none. Is there a solution to prevent this?