Создание пользовательского вертикального меню

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

Я хочу создать пользовательское меню с Walker_Nav_Menu, которое должно выглядеть так:

---------------------------------- Section 1 | Section 2 | Section 3 ---------------------------------- | SubMenu 1 | | SubMenu 2 | | Sub SubMenu 1 | | Sub SubMenu 2 | | SubMenu 3 | | SubMenu 4 | 

Подменю 1 и 2 в подменю 2 должно появляться только тогда, когда мышь наводится / на ссылку клика, а если нет, то исчезает. Я искал, и следующая ссылка показывает меню, которое я хочу адаптировать к WordPress. Проблема в том, что я не могу установить теги классов на ul и li: http://codepen.io/WhiteWolfWizard/pen/MYQGQQ

Я попытался адаптировать его к классам меню по умолчанию WordPress, но не работал. Коды, которые у меня есть:

МЕНЮ:

  <div id="menubar-menu"> <ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Home</a></li> <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Section 1</a> <ul class="sub-menu"> <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Subsection 1</a></li> <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Subsection 2</a></li> <ul class="sub-menu"> <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">SUB subsection 1</a></li> <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">SUB subsection 2</a></li> </ul> <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Subsection 3</a></li> </ul> </li> </ul></div> <script> $(document).ready(function () { $('#menu .menu-item.menu-item-has-children .trigger-sub-menu i').on('click', function () { $(this).toggleClass('fa-flip-vertical'); $(this).parent().toggleClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').toggle(); $('#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i').removeClass('fa-flip-vertical').parent().removeClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').slideUp(); return false; }); $('#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i').on('click', function () { $(this).toggleClass('fa-flip-vertical'); $(this).parent().toggleClass('active'); $('#menu .menu-item.menu-item-has-children .sub-menu').slideToggle(150); return false; }); }); </script> 

CSS:

 #menu .menu-item { float: left; margin: 10px 0 10px 5px; } #menu .menu-item a { position: relative; height: 30px; padding: 0 10px; border-radius: 2px; display: block; -webkit-transition: all 150ms ease; transition: all 150ms ease; color: #8aa4bb; line-height: 30px; white-space: nowrap; } #menu .menu-item a:hover, #menu .menu-item a:active { background: #8aa4bb; color: #fff; } #menu .menu-item a:active { background: #758b9f; } #menu .menu-item a[class*="trigger-"] { padding-right: 40px; } #menu .menu-item ai { position: absolute; top: 0; right: 0; bottom: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; } #menu .menu-item ai:after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; height: 50%; margin: auto; border-left: 1px solid rgba(0, 0, 0, 0.15); } #menu .menu-item.menu-item-has-children { position: relative; } #menu .menu-item.menu-item-has-children .sub-menu { position: absolute; top: 0; right: 0; border-radius: 2px; background: #fff; display: none; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(35px); transform: translateY(35px); } #menu .menu-item.menu-item-has-children .sub-menu li { float: none; margin: 0; } #menu .menu-item.menu-item-has-children .sub-menu li a { border-radius: 0; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu { border-top: 1px solid rgba(0, 0, 0, 0.15); background: #758b9f; display: none; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li { width: 100%; display: table; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a { height: 25px; font-size: 8pt; color: #fff; line-height: 25px; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a { margin-top: 5px; } #menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a { margin-bottom: 5px; } 

Любая помощь будет оценена! Заранее спасибо! 🙂

Solutions Collecting From Web of "Создание пользовательского вертикального меню"