Dropdown menu on a multiline list

Question

I have an example of my problem set up here.

I have had to set some li's to display: inline, so that they can occur on the same line, but now I need to add drop-down lists to them, and the drop down lists are happening on the other side of the page from where I would like them to. Do I have to position my original li's in a different manner?

Answer 1

I'm not sure if you're trying to move the top menu to the left, or the submenus to the right, so I'll propose a solution either way.

If you want the main menu items to appear on the left, then you need to remove or change the text-align: right in your body css.

If you want the submenus to appear on the right side, then because your <ul>s are absolutely positioned, you should change this rule:

    li:hover ul
    {
        left: auto;
    }

to this:

    li:hover ul
    {
        right: 0;
    }

Answer 2

Keep in mind that if you want to use the :hover class in anything other than an anchor tag, forget getting it to work in IE6 and make sure you have the correct DOCTYPE for the other browsers.

Try replacing the relevant parts of your CSS with this:

li
{
    display: inline;
}

ul.level_1 li
{
    position: relative;
}

ul.level_1 ul
{
    position: absolute;
    visibility: hidden;
}

li:hover ul
{
    position: absolute;
    right: 0;
    visibility: visible;
    width: 300px;
}

Basically hides the sub-level list until you hover over the parent list item node.

Setting the parent list item nodes as position:relative means that if you set any child nodes within as position:absolute it will be set relative not to the browser window but to the parent list item. This will have them show up directly underneath the list item you're hovering over and not on the other side of the window.

The width was added to have the sub-level list display as a line instead of a column.