On Stack Overflow I found a question: How can I make my CSS menu's hover states move horizontally for UX purposes?
Unfortunately, this solution can't be purely CSS.
It helps to approach this problem by thinking about the flow of the interaction:
With a pure CSS solution, one element's interaction can effect another unnested element's actions.
Here's a JSFiddle of what the asker was trying to achieve: https://jsfiddle.net/realchaseadams/Dm9Eu/4/
And the gist (https://gist.github.com/chaseadamsio/7281682) for the code:
How would you have solved this problem? Create a JSFiddle or a gist and share it, I'd love to see how other people solve this problem!
Original Question: How can I make my CSS menu's hover states move horizontally for UX purposes? (StackOverflow Question)