У меня есть вот такая верстка:
.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' => '',
) );
?>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть приложение WPF, разделенное на три части согласно паттерну MVVMПриложение работает с БД MySql средствами Entity Framework 6
Мне нужно выводить информацию пользователю с задержкойК примеру, менять содержимое текстовой метки каждую секунду