Search code examples
cssdrop-down-menuflyout

Is it possible to make a CSS cascading drop-up menu (mirror of drop-down)?

I started on doing this, and I thought; oh this will be easy, but I got stuck when the fly-out covers up the other categories.

I don't even know if I can do this! My CSS skills are quite rusty!

Here's what I started, but it's really not even good: + http://codepen.io/anon/pen/ZbYzwr

             [===========]
[===========][===========]
[===========][===========]
[===========][===========]
[-----------][===========]
[===========]
[:::::::::::::::::::::::::::::::::::::::::::]

If this is the menu, then because the lower categories when they are flown-out invisibly cover up the ones above them, you can't hover over them!

It's supposed to be like the LXDE panel menu (lxpanel).

On LXDE, the fly-out items start from the top, unless they would go below the screen, in which they are appropriately offset. I can't think of a way to do that with CSS. Can you? The only way I can think of is to let the fly-out items start from the bottom, but what's the special trick to get that to work?

Thanks!

Solution

  • Set margin-left: 100px; to [category] > ul instead of button.

    I've forked your pen here.