Горизонтальное вложенное меню LI - PullRequest
Новая
       7

Горизонтальное вложенное меню LI

0 голосов
/ 04 августа 2011

Я пытаюсь создать горизонтальное меню, используя CSS

Пожалуйста, обратитесь к следующему http://jsfiddle.net/aUYca/

Классы CSS

  1. li.navMenuParent: элемент меню верхнего уровня
  2. li.navMenuActiveParent: пункт меню ACTIVE верхнего уровня
  3. li.navMenuNode: элемент меню верхнего уровня, у которого нет дочерних элементов
  4. li.Active: пункт меню ACTIVE на уровне ребенка

Я хочу, чтобы меню всегда отображало меню дочернего уровня, когда родительский элемент имеет элемент navMenuActiveParent. (Начальное состояние находится над 2Parent) 

.navmenu ul li.navMenuActiveParent > ul
{
display: inline;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}

Однако я хочу, чтобы это подменю было скрыто, когда пользователь наводит курсор на пункт меню верхнего уровня БЕЗ детей. (Наведите указатель мыши на пункт меню HOME) 

 .navmenu li.navMenuParent ul
 {
   display: none;  -- I want this applied to ALL <ul> under .navMenu
 }

Я хочу, чтобы подменю показывало правильное подменю, когда пользователь наводит курсор на элемент меню верхнего уровня WITH children. (Наведите курсор на 1 родитель) 

 .navmenu li.navMenuParent:hover ul, .navmenu li.navMenuParent.hover ul
 {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0;
 }

Я не могу заставить это работать с чистым CSS.

Спасибо за любую помощь!

1 Ответ

1 голос
/ 16 августа 2011

Хитрость заключается в применении правильных эффектов к нужным элементам с минимальной разметкой, насколько это возможно.

http://jsfiddle.net/EGNKE/74/

Имейте в виду, я не сбрасывал большинство вещей, потому что jsFiddle делает это для вас, и я бы рекомендовал сбросить файл css по умолчанию, если вы не похожи, бог, на css.

Он умирает только в режиме причуд в IE, но можно легко запретить пользователям просматривать ваш сайт в режиме причуд, придерживаясь стандартов и / или используя заголовок, совместимый с X-UA-совместимым (google it).

Полагаю, вы сами можете разобраться с остальными, дайте мне знать:)

(о, кстати, лучше использовать ярлык для этой фоновой стрелки на фоне пункта меню: цвет url ('path.jpg') posx posy repeat;)

...