Горизонтальные меню с подменю полной ширины CSS jfiddle включены

Question

Горизонтальные меню с подменю полной ширины CSS jfiddle включены

0

Я хочу сделать горизонтальное выпадающее меню, похожее на главное меню из HowStuffWorks: http://home.howstuffworks.com/community-living

Обратите внимание, как подменю покрывает всю ширину горизонтальной панели главного меню, а не падает вниз в вертикальных списках. И как подсвечивается выбранный в данный момент пункт главного меню и элементы подменю. Мне бы хотелось, чтобы эти функции добавили бонус к отображению других списков подменю при наведении курсора на другие пункты главного меню, пожалуйста, посмотрите примеры ниже:

В основном я хочу объединить эффект отображения разных списков подменю при наведении на ссылки, как в этом: http://jsfiddle.net/SKNYC/

А также наличие выделенного в данный момент меню в другом цвете, как в этом: http://jsfiddle.net/pRT6S/

.full-width {
    width: 100%;
}

.normal-width {
    width: 1024px;
    margin: 0 auto 0 auto;
}
.main-menu > li {
    float:left;
    list-style-type:none;
    padding-right:30px;
}
.sub-menu {
    display:none;
}
.sub-menu li {
    float:left;
    padding-right:30px;
}

.sub-menu li:hover ul {
    float:left;
    padding-right:30px;
    background-color:green;
}

.main-menu li.active {
    background-color:blue;
}
.main-menu > li.active .sub-menu {
    display:block;
    position:absolute;
    left:0;
    right:0;
    background-color:blue;
}

Обратите внимание, что я очень новичок в CSS/HTML, было бы неплохо получить какое-то направление относительно того, как действовать. :)

Первый jfiddle изменен из этого кода: https://gist.github.com/jgoyon/3993263

Второй и третий jfiddle исходит от кого-то кода в этом потоке: горизонтальное меню горизонтальной страницы ширины страницы и горизонтальное подменю

EDIT: Еще один код, который я заметил, очень похож на мое решение: http://jsfiddle.net/U65eT/

но я не уверен, почему, когда наведение на item1 и item2 не работает?

EDIT: Текущая версия http://jsfiddle.net/pRT6S/4/

Это почти правильно, просто проблема не показывать подменю при наведении указателя на элемент1

SonicProtein 18 май 2014, в 02:29

Источник

Теги:

html

css

submenu

drop-down-menu

menu

1 ответ

Ещё вопросы

Marcus McLean · Accepted Answer · 2014-05-17T22-12-00.000Z

Как это? Проверьте комментарии, которые я сделал.

http://jsfiddle.net/pRT6S/3/

Основная проблема заключалась в том, чтобы изменить .main-menu, а не .sub-menu, как показано ниже:

/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
    display: block;
    /* float:left; */
    position: absolute;  /* better than float in this case */
    padding-right:30px;
    background-color:green;
    left: 0;             /* make sure everything hangs on the left */
}

Обновление: вы можете использовать код, который вы изначально предоставили (что я ошибочно прокомментировал), но немного измените его добавление абсолютного позиционирования и z-индексов:

http://jsfiddle.net/pRT6S/5/

Спасибо, это почти правильно. Мне просто нужно, чтобы подменю item2 показывалось по умолчанию, потому что оно выбрано в данный момент. И когда я наводю указатель мыши на item1 или item3, он заменяет строку подменю их элементами подменю (зеленым). Как показано ниже: jsfiddle.net/pRT6S/4 Кроме того, я не уверен, почему при наведении курсора на пункт 1 зеленая линия не отображается?
Проверьте мое обновление. Я думаю, это то, что вы ищете. Изменить: Вы правы о необходимости этого кода. Вам просто нужно было добавить z-индексы и использовать абсолютное позиционирование.
Ааа, я вижу, я бы никогда не подумал об использовании z-индексов. Да, сейчас он ведет себя правильно, спасибо :)