Pure CSS Dropline Menu - second level menu items sit below their parent - but sometimes extend off screen and add horizontal scrollbar

Question

Hi,

I'm working on a pure css menu that consists of four levels

Level 1 and 2 are a dropline menu in style Levels 3+ are dropdown menus

When you hover over a level 1 menu item, the level 2 menu displays directly below menu item you are currently hovering over. However if there are lots of menu items on level 2 then the level 2 menu goes off the screen and you see a horizontal scroll bar.

What I want to happen is that if the menu is going to go off the screen I want it to get pushed to the left. For example, if the menu was 300px long, but there was only 250px between the level 1 menu item and the edge of the page, then the level 2 menu should not be placed directly under the level 1 parent, instead it should be 50px to the left.

I use a nested unordered list for the menu.

Answer 1

For that sort of logic I think you'll need a JavaScript-based solution.