Текущее подменю жидкости, которое шире родительского li |wp_nav_menu

Question

С помощью wp_nav_menu Wordpress создает приятную навигацию, которую легко поддерживать. На данный момент навигация имеет подменю и подменю. При наведении курсора на ссылку 2 открывается большое подменю с 5 подменю и подменю под ним (таким образом вы видите, что находится под меню).

Пример JSFiddle с оригинальным меню http://jsfiddle.net/tSLqV/1/

Обычно .sub-menu будет postion: absolute, потому что оно должно висеть над некоторыми элементами. Но по какой-то причине jsfiddle не показывает должным образом .sub.menu таким образом. Так что в примере это позиция: относительная сейчас.

=====

Пример JSFiddle, где я получил его на работу для части http://jsfiddle.net/HYBA7/5/

=====

В чем проблема? Ну, я могу отобразить подменю, включая подменю, но я хочу, чтобы оно было плавным. Если подменю не подходит, оно попадет под другое подменю с плавающей точкой: left; Подменю будет регулироваться по высоте.

Обычно я бы сделал это: максимальная ширина: 940 пикселей; ширина: 100%;

Проблема в том, что этот ul является вложенным. Когда я использую 100%, он покажет все элементы на 25% из-за родителя li. Не уверен, почему он работает со вторым JSFiddle ...

Тогда я подумал о том, чтобы придать улье ширину 400% (4 х 25% составляет 100%), но это тоже не работает.

=====

Проведя 2 дня с этим беспорядком, я искал другой подход. Что если я смогу избавиться от всех этих ули? И вместо этого есть div (не уверен, что это хороший способ). И тогда у div не будет этой проблемы с шириной родительского элемента? Просматривая кодекс Wordpress, я обнаружил, что можно удалить первый ul и изменить некоторые классы, но это все.

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

Я читал об Уокерах, но мне не удалось преобразовать ul.sub-menu в элемент div.

=====

Я знаю, что можно загрузить дополнительное меню только с этими 5 подменю с помощью подменю и позволить ему скользить с помощью jQuery, но мне нравится использовать его без помощи javascript и делать его только css.

Кто-нибудь может мне помочь с этой проблемой?

Answer 1

Хорошо, мне удалось сделать жидкость подменю.

Я нашел Уокера, который добавляет класс (уровень-0, уровень-1) для каждого подменю.

 class UL_Class_Walker extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"level-".$depth."\">\n";
  }      
}

Затем я снова работал над идеей 400%.Единственное, что было нужно, так это то, что левому свойству также нужно значение в%.Таким образом, я сделал это -100% (потому что есть 4 родительских пункта меню - и его нужно выровнять по всему меню)

li#menu-item-23 ul.level-0 {
position: absolute;
display: none;
/*width: 940px;*/
max-width: 960px;
width: 400%;
left: -100%;
background: #fff;
z-index: 100;

}

Позже протестирую его в IE,но Firefox и Safari отображают все правильно.