Create self-populating menu and add extra divs to the menu layout

Question

What I'm trying to achieve:

A menu with one level of sub-menus:

PAGE 1<br>
--- Page 1 sub-page 1<br>
--- Page 1 sub-page 2<br>
PAGE 2<br>
--- Page 2 sub-page 1<br>
--- Page 2 sub-page 2<br>
--- Page 2 sub-page 3<br>
PAGE 3<br>
--- Page 3 sub-page 1<br>
--- Page 3 sub-page 2<br>

When on PAGE 1, display all PAGE 1 sub pages in a section below the top level pages. When on PAGE 1 & hover over PAGE 2, display all PAGE 2 sub pages in a section below the top level pages

To display this properly on my website, I need to add a div inside the ul.sub-menu

<ul>
  <li><a>...</a>
    <ul class="sub-menu">
      <div class="container">
        <li><a>...</a></li>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </div>
    </ul>
  </li>
</ul>

To do this, I've tried creating a Walker Class, but when I add that to my wp_nav_menu() function it removes the menu all together. This is the Walker Class I've used:

class custom_wp_walker extends Walker_Nav_Menu{
  function start_lvl(&$output, $depth) {
    $output .= '<ul class="children"> 
                  <div class="container">';
  }
  function end_lvl(&$output, $depth) {
    $output .= '
        </div>
        </ul>';
  }
}

Now, in order to get my menu to be self-populating I have not created a menu in the wordpress backend (Appearance -> Menus). And if I remove the walker class it adds all my menu items, including child items to the front end. I just can't style it properly.

If, however, I create a menu in the backend and manually add the items I have, the Walker class works and adds the extra div. The problem is that the child-items don't get added automatically and I need them to. Does the Walker class require pages to be added manually in the backend to work?

The people I'm building the site for are a bit technologically challenged, so it needs to populate itself because they can't do it themselves.

So, my question is how can I add that extra div inside the ul.sub-menu and still have an entirely self-populating menu? Is there another way besides the Walker class? I've tried googling to come up with a solution, but haven't found anything else.

Answer 1

Your html structure should look like

<ul class="parent-class">
  <li>Page 1</li>
  <li>
    <ul class="child-class">
      <li> Sub menu item 1</li>
      <li> Sub menu item 2</li>
    </ul>
  </li>
</ul>

Wordpress should automatically add an "active" class to the active page then you should be able to style everything with css. Something like

.parent-class li ul {
   Display:none;
}

.Active li ul {
   display:block;
}

.parent-class:hover > .parent-class li ul {
   display:block

}