admin管理员组文章数量:1330166
I am using wp_nav_menu on my wordpress theme but I can seem to figure out how to display the last level on my menu navigation. I would like the last level to display on hover of the parent item.
Here is my wp_nav_menu which is in my header.php file:
<?php
wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'menu-bar',
'menu_id' => 'main-menu',
'container' => 'ul',
)
);?>
Here is my CSS:
/*==============================
- Navigation Menu Css
===============================*/
header .menu-bar{
list-style-type: none;
margin:0;
padding:0;
display: flex;
}
header .container {
display:flex;
justify-content: center;
align-items: center;
}
header .menu-bar li a {
padding:0 1rem;
}
header .menu-bar li {
float:left;
margin-right:3px;
}
header .top-bar li:first-child a{
padding-left:0;
}
header .top-bar li:last-child a{
padding-right:0;
}
header .menu-bar li .sub-menu {
display:none;
position: absolute;
top:100%;
left:0;
background: #fff;
box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
margin:0;
padding:0;
width:300px;
z-index: 999;
}
header .menu-bar li .sub-menu a {
color:#000;
}
header .menu-bar .menu-item-has-children:hover .sub-menu {
display:block;
}
header .menu-bar .menu-item-has-children .sub-menu .sub-menu{
display:none;
}
Here is my HTML:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-bottom-inner">
<div class="header-bottom-left-wrap">
<ul id="main-menu" class="menu-bar"><li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-26"><a href="http://localhost:8080/my-website/menu-item-1/">Menu Item 1</a>
<ul class="sub-menu">
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/">Sub Level 1</a>
<ul class="sub-menu">
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/sub-level-2/">Sub Level 2</a></li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/sub-level-2/">Sub Level 2</a></li>
</ul>
</li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-40"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/">Sub Level 1</a>
<ul class="sub-menu">
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/sub-level-2/">Sub Level 2</a></li>
</ul>
</li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"><a href="http://localhost:8080/my-website/menu-item-1/sub-level-1/">Sub Level 1</a>
<ul class="sub-menu">
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="/my-website/menu-item-1/sub-level-1/sub-level-2/">Sub Level 2</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="/my-website/menu-item-2/">Menu Item 2</a>
<ul class="sub-menu">
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="/my-website/menu-item-2/sub-level-1">Sub Level 1</a></li>
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="/my-website/menu-item-2/sub-level-1">Sub Level 1</a></li>
</ul>
</li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="/my-website/menu-item-3/">Menu Item 3 </a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="/my-website/menu-item-4/">Menu Item 4 </a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="/my-website/menu-item-5/">Menu Item 5</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="/my-website/menu-item-6/">Menu Item 6</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
</header>
本文标签: theme development3 Level Menu Navigation (3rd Level not displaying)
版权声明:本文标题:theme development - 3 Level Menu Navigation (3rd Level not displaying) 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742262416a2442762.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论