I have a menu that it getting a bit tricky and I need to use CSS to change the position of the child element when hovering over the parent elements after pseudo element. So I'll try to explain a bit further below. I really want to avoid using JavaScript for this even though it'd be super easy with onclick events, in this case it's not practical for me (if I can avoid it, I'd like to).
So here is my multi list menu, however only the first level and second level are displayed as headers, the rest are as a list:
---------------------------------------
| |
| Parent 1 Parent 2 Parent 3 |
| -------- -------- -------- |
| |
| Child 1 Child 2 Child 3 |
| Child 1 Child 2 Child 3 |
| Child 1 Child 2 Child 3 |
| Child 1 Child 2 Child 3 |
| Child 1 Child 2 Child 3 |
| Child 1 Child 2 Child 3 |
| |
| :after |
---------------------------------------
So what I want to do is when you hover over the :after which is the main ul, so it's ul:after, I want to make the ul itself change. But how can I make it change itself based on it's own pseudo element?
So basically I want the box to move when I hover over :after and it stays active when I move the mouse around inside the box.
I'm styling the pseudo element like so:
.nav ul li ul:after
I tried to use the following but they didn't seem to work: -
.nav ul li ul:after:hover {}
.nav ul li ul:hover:after {}
Is this possible? I thought it'd be pretty easy...