1

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...

Stickers
  • 63,307
  • 17
  • 114
  • 156
ow_dj
  • 63
  • 1
  • 11
  • Hmm, can you explain why you're using the :after selector? And define 'moving the box'? Like adding more margin to it? – Shilly Oct 15 '15 at 11:47
  • Yeah so I want the :after to act as a like, read more button that when hovered it would move it's parent (the ul) by adding more height to it so it acted like a reveal button. – ow_dj Oct 15 '15 at 11:51
  • You can't directly select parents by hovering a child in css, it only cascades down. But have a look at this SO question and its referenced questions, it might contain snippets you can use: http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element – Shilly Oct 15 '15 at 11:59
  • It can be pretty easy, the thing is no one really gets what you're talking about, probably a minimal code/demo will help. – Stickers Oct 15 '15 at 17:56

0 Answers0