Novel CSS dropdown/Megamenu

Question

Привет, я хочу создать новый тип раскрывающегося списка навигации (новый, как я еще не видел).

В основном, когда я наводил курсор на элемент навигации, выпадающее окно должно появляться под навигацией. Разница с нормальным выпадающим списком заключается в том, что я хочу, чтобы в этом раскрывающемся списке содержались все элементы навигации navs (а не только элементы, принадлежащие зависающему элементу). Поэтому в моем примере кода, если бы навести курсор на Nav 1, тогда появятся все элементы a-i.

<ul> 
      <li><a href="#">Nav 1</a> 
       <ul> 
        <li><a href="#">item a</a></li> 
        <li><a href="#">item b</a></li> 
        <li><a href="#">item c</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Nav 2</a> 
       <ul> 
        <li><a href="#">item d</a></li> 
        <li><a href="#">item e</a></li> 
        <li><a href="#">item f</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Nav 3</a> 
       <ul> 
        <li><a href="#">item g</a></li> 
        <li><a href="#">item h</a></li> 
        <li><a href="#">item i</a></li> 
       </ul>     
      </li> 
     </ul> 

Примечание: Раскрывающийся должна быть такой же ширины, как нав и ссылки каждого Nav элемента должен появиться под ним. I've attached a sketch!

Я подумал о том, чтобы поместить div, содержащий выпадающий список в UL, и показать его на ul.hover, но затем это не будет проверяться, и вы не сможете настроить таргетинг на то, что было зависеть.

Возможно, это будет невозможно, используя только css, если кто-то может сообщить мне, что это было бы здорово.

Извините, если это кажется бессвязным ... надеюсь, кто-то поймет, что мне нужно!

Answer 1

Таким образом, нависание над любой частью навигации показывает все подуровни?

Вот базовая функциональность jsfiddle; вам тогда нужно стилизовать его с помощью CSS.

например

http://www.alistapart.com/articles/hybrid/

http://htmldog.com/articles/suckerfish/dropdowns/

(есть сотни примеров на Google)