Строка меню с подкатегориями Hover?

Question

Я пытаюсь создать строку меню, которая имеет 2 уровня меню. Главное меню является основным. Тогда второй уровень под ним имеет несколько элементов подкатегории. Прямо сейчас вам нужно сначала щелкнуть главное меню и загрузить эту страницу, чтобы увидеть элементы меню подкатегории для этого раздела, потому что они просто жестко запрограммированы на странице. Я хочу сделать так, чтобы при наведении курсора на пункты главного меню он загружал подменю.

Вот jsFiddle области навигации и CSS

Вот несколько скриншотов того, как это выглядит

Какой мой лучший способ сделать это? Я не самый опытный, но я довольно хорошо разбираюсь в HTML и CSS. Любая помощь в правильном направлении была бы отличной. Спасибо.

Answer 1

В прошлом я создал этот тип меню. Я создал копию кода, который вы можете найти здесь http://jsfiddle.net/PWFGd/24/

Свойство, которое вы хотите использовать:

selector{
  display: none;
}

selector:hover{
  display: block;
}

Надеюсь, это поможет.

Aymeric.

Answer 2

@ Aymeric - хороший ответ, его также называют «2-уровневая горизонтальная навигация в CSS», я часто использую их в своих проектах,

вот демонстрация того, что вы ищете

полная ссылка на учебник

Answer 3

Вы можете использовать общий братский комбинатор (~) с вашей текущей структурой, чтобы выполнить нечто подобное. Используйте псевдоэлемент hover для переключения состояния отображения (или видимости) подменю.

http://jsfiddle.net/PWFGd/25/

/* on hover of mainmenu, find subnav and show it */
.mainMenu:hover ~ ul.subNav {
    display: block;
}

ul.subNav{
    display: none; /* hide submenu */
    font:normal 11px/12px Arial, Helvetica, sans-serif;
    padding:4px 0 0 0;
}

В сети навигационных меню на основе CSS имеется множество примеров. Я думаю, что вы можете переосмыслить свою HTML-структуру и использовать одну из них. Google