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 class="sub-menu">
      <div class="container">

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 .= '

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.

  • 1
    note that div is not a valid child of ul and may have unpredictable results. li is the only direct valid child of a ul.
    – Milo
    Mar 8, 2015 at 17:52
  • oh, I didn't know that. I'm quite new to web design... I tried it in chrome and it worked so I assumed it was okay. I'll have to figure out some other way to style it then.
    – laura.f
    Mar 8, 2015 at 18:28

1 Answer 1


Your html structure should look like

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

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 {

.Active li ul {

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


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.