Question

I have a website with your usual 2 level navigation in the form of a dropdown using Suckerfish and the <ul><li> construct to create the menu.

The problem is the menu is right aligned on the page, thus I’ll need to make the dropdowns push out to the left, as shown, to keep them within the page:

Dropdown http://piestar.net/share/sample-dropdown.png

If the top level menu tabs were the same size it wouldn’t be a problem, but they are variable width so I cannot use a pre-calculated negative margin.

The question is, how can this effect be achieved? I’d rather not use javascript to align them correctly but fear it may be the only solution.

Answer 1

Use the css property

right:0;
top:20px; # or whatever height from the top of the parent
position:absolute;

on the submenu ul, and possibly

position:relative;

on the parent li.