CSS Drop Down, Responsiveness and self-contained

HTML & CSS
1

Hi there,

Hopefully this isn’t too much of a tall order since I have seen it done before.
I’m looking for a solution to a drop-down issue which involves the drop-down menu itself overhanging on the page, creating a horizontal scrollbar and a few frustrations from users. I have come across a few neat drop-down menus (including entries for a Sitepoint competition from a few weeks back!) which are both responsive and css-only (ie. no javascript) but so far none which solve the problem of the drop-downs overhanging the page.

Ideally I would like a solution which means that if the drop-down is too big to fit in the remaining viewing area, it will wrap around and “stick” to the right-hand side of the window and be pushed to the left. I guess one simple solution is to not have such a wide drop-down area…

What are your thoughts on the best solutions for drop-downs?

Cheers,

Andrew

2

It’s easy enough to set the right-most drop menu to align right so that it doesn’t hang out to the right. Sounds like that’s the way to go here.

3

Any over hanging the window will create scrollbars. Anything except position fixed.

4

for most modern browsers you can use the ~ ( general sibling selector) to set a point (via classes or adjacent selectors and switch the positioning of your drop down. so something like

li ul { width:15em; position:absolute; left:100%;}
li.midpoint ~li ul {left:auto; right:100%;}

you then assign the .midpoint class to the LAST drop down that you want facing outwards.

hope that helps