Нужна помощь в построении массива меню WordPress

270
17 января 2017, 22:39

У меня есть вот такая верстка:

.container { 
  max-width: 1200px; 
  margin: 0 auto; 
} 
.menu { 
  top: 30px; 
  background-color: #fff; 
  position: absolute; 
  left: 0; 
  right: 0; 
  margin: auto; 
  z-index: 1000; 
} 
.menu ul { 
  margin: 0 0 0 200px; 
  padding: 0; 
  display: inline-block; 
  vertical-align: middle; 
  cursor: default; 
} 
.menu ul li { 
  list-style-type: none; 
  display: inline-block; 
  vertical-align: top; 
} 
.menu ul > li { 
  line-height: 65px; 
} 
.menu ul li + li { 
  margin-left: 50px; 
} 
.menu ul li a { 
  color: black; 
  font-size: 14px; 
  line-height: 18px; 
  font-weight: 700; 
  text-transform: uppercase; 
  -webkit-transition: all 0.2s ease; 
  transition: all 0.2s ease; 
} 
.menu ul li a:hover, 
.menu ul li a:active, 
.menu ul li a:focus { 
  color: #d60000; 
  text-decoration: none; 
} 
.menu img { 
  max-width: 100%; 
  height: auto; 
  display: inline-block; 
  vertical-align: middle; 
} 
.menu ul > li a + ul { 
  display: none; 
} 
.menu ul > li:hover a + ul { 
  display: block; 
} 
.menu ul > li:hover > a { 
  color: #d60000; 
} 
.menu ul > li:hover .menu ul > li ul > li > ul > li > a { 
  color: #fff; 
} 
.menu ul > li > a + ul { 
  position: absolute; 
  left: 0; 
  top: 65px; 
  right: 0; 
  width: 100%; 
  background-color: #000; 
  border-top: 2px solid #d60000; 
  margin: 0; 
} 
.menu ul > li > ul > ul { 
  padding: 0; 
  margin: 0 auto; 
  width: 100%; 
  max-width: 1185px; 
  display: block; 
} 
.menu ul > li ul > li { 
  width: 14.5%; 
  padding-bottom: 30px; 
  line-height: 18px; 
} 
.menu ul > li ul > li span { 
  opacity: 0.3; 
  color: white; 
  font-size: 14px; 
  line-height: 18px; 
  font-weight: 400; 
  text-transform: uppercase; 
  display: inline-block; 
  padding: 30px 0 20px 0; 
  width: 100%; 
  position: relative; 
} 
.menu ul > li ul > li + li { 
  margin-left: 2.166666%; 
} 
.menu ul > li ul > li > ul > li { 
  border-bottom: none; 
  display: block; 
  width: 100%; 
  padding: 24px 0 0 0; 
} 
.menu ul > li ul > li > ul > li > a { 
  color: #fff; 
} 
.menu ul > li ul > li > ul > li + li { 
  margin-left: 0; 
  padding: 19px 0 0 0; 
} 
.menu ul > li ul > li > ul { 
  border-top: 1px solid #262626; 
  margin: 0; 
} 
.menu ul > li > .wrap-ul > ul > li > ul { 
  margin: 0; 
  width: 100%; 
}
<div class="menu"> 
  <div class="container"> 
    <a href="" title=""> 
      <img src="" alt=""> 
    </a> 
    <ul> 
      <li><a href="">Apps</a> 
        <ul> 
          <ul> 
            <li><span>Running</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
            <li><span>Fitness</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
            <li><span>Yoga</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
            <li><span>Sleep</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
            <li><span>Nutrition</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
            <li><span>Commutiny</span> 
              <ul> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
                <li><a href="">Moves Tracker</a> 
                </li> 
              </ul> 
            </li> 
          </ul> 
        </ul> 
 
      </li> 
      <li><a href="">Services</a> 
      </li> 
      <li><a href="">About</a> 
      </li> 
      <li><a href="">Contact us</a> 
      </li> 
    </ul> 
  </div> 
</div>

Вся проблема в том, что у меня в верстке идут два ul подряд, первый растягивается абсолютно на всю ширину, а второй имеет фикс ширину и центрируется.

Стандартная функция WordPress не вызывает такую структуру, но вроде как есть хуки, которые решают эту проблему, только я не смог.

Очень прошу, помогите с функцией построения меню под мою структуру, у меня сейчас такая:

    <?php 
wp_nav_menu( array( 
    'theme_location'  => 'top', 
    'menu'            => '', 
    'container'       => 'false', 
    'container_class' => '', 
    'container_id'    => '', 
    'menu_class'      => '', 
    'menu_id'         => '', 
    'echo'            => true, 
    'fallback_cb'     => 'wp_page_menu', 
    'before'          => '', 
    'after'           => '', 
    'link_before'     => '', 
    'link_after'      => '', 
    'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>', 
    'depth'           => 0, 
    'walker'          => '', 
) ); 
?>

READ ALSO
Авторизация в СУБД MySQL в связке с [WPF + MVVM + Entity Framework]

Авторизация в СУБД MySQL в связке с [WPF + MVVM + Entity Framework]

Есть приложение WPF, разделенное на три части согласно паттерну MVVMПриложение работает с БД MySql средствами Entity Framework 6

435
Не сохраняется добавление записи в БД, EF

Не сохраняется добавление записи в БД, EF

Есть банальная табличка

346
Почему Thread.Sleep ведёт себя неправильно? Как мне сделать задержку или длинные вычисления в графической программе?

Почему Thread.Sleep ведёт себя неправильно? Как мне сделать задержку или длинные вычисления в графической программе?

Мне нужно выводить информацию пользователю с задержкойК примеру, менять содержимое текстовой метки каждую секунду

511
Ошибка 500 при обращении к /Token в ASP.Net WebApi

Ошибка 500 при обращении к /Token в ASP.Net WebApi

Пытаюсь получить токен:

397