Выпадающее меню в многострочном списке

Question

У меня есть пример моей проблемы, настроенной здесь .

Мне пришлось настроить некоторые li для отображения: inline, чтобы они могли появляться в одной строке, но теперь мне нужно добавить к ним выпадающие списки, а выпадающие списки происходят по другую сторону страница, откуда я хотел бы их. Должен ли я позиционировать мои оригинальные li по-другому?

Answer 1

Имейте в виду, что если вы хотите использовать класс :hover для чего-либо, кроме тега привязки, не забудьте заставить его работать в IE6 и убедитесь, что у вас есть правильный DOCTYPE для других браузеров.

Попробуйте заменить соответствующие части вашего CSS следующим:

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;
}

В основном скрывает список подуровней, пока вы не наведете курсор на узел элемента родительского списка.

Установка узлов родительского элемента списка как position:relative означает, что если вы установите какие-либо дочерние узлы в качестве position:absolute, они будут установлены относительно окна браузера, а не элемента родительского списка. Это позволит им отображаться непосредственно под элементом списка, над которым вы наводите курсор, а не по другую сторону окна.

Добавлена ​​ширина, чтобы список подуровней отображался в виде строки вместо столбца.

Answer 2

Я не уверен, пытаетесь ли вы переместить верхнее меню влево или подменю вправо, поэтому я предложу решение в любом случае.

Если вы хотите, чтобы пункты главного меню появлялись слева, вам нужно удалить или изменить text-align: right в вашем body css.

Если вы хотите, чтобы подменю появлялись справа, то, поскольку ваши <ul> абсолютно расположены, вы должны изменить это правило:

    li:hover ul
    {
        left: auto;
    }

к этому:

    li:hover ul
    {
        right: 0;
    }