theme development - 3 Level Menu Navigation (3rd Level not displaying)

admin管理员组

文章数量:1331941

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)