wp_nav_menu: horizontal menu, with children underneath

You’ll need to use a javascript/jQuery solution to create “accordion” menus that expand and collapse on mouseover/mouseout.

I don’t know for sure if I can accomplish this with an accordion menu. The menu I want is a lot like this one.

Oh, my mistake. You said “horizontal”, not “vertical”.

That menu is entirely possible, using nothing but CSS.

Okay, I have to dive in the code of that particular site then. Or do you know a place where it’s explained or does it have some kind of a name? Never heard of an accordion menu either but makes perfect sense to me.

The code of my example doesn’t use any jQuery to do this and is a big mess. The examples I found on Google and in the Codex are all different from what I’m looking for. The examples are menus that only show the subpages on mouseover.

I will trie to be as specific as possibile and hope someone can help me out.

If we look at this example the menu “Tv Gids” and subpage “home” are active. In fact the main pages “TV gids, Genres, MijnTVgids.nl etc etc.” are not navigating anywhere. Only the submenu-items on these menu-items do have content.
When you are on TVgids/home and mouse-over “Genres” or “On demand” for example, their subpages become visible. That is exactly what I want. So when you open the page in your browser, it show you by default the subpages under the first menu-item and on mouse-over on the other menu-item it show their submenu-items.
I hope someone know how to do this or can point me to a tutorial or explanation.

Thanks in advance.

Bumper….

Okay, I found this code and it looks a lot like I would like it to be. I tried to change it so the submenu items of menu 1 were shown by default, without a hover. Didn’t got it to work so far. Hope someone can help. this is the code.

<ul id="nav">
			<li><a href="#">Menu 1</a>
				<ul>
					<li><a href="#">Menu 1 Submenu item 1</a></li>
					<li><a href="#">Menu 1 Submenu item 2</a></li>
					<li><a href="#">Menu 1 Submenu item 3</a></li>
				</ul>
			</li>

			<li><a href="#">Menu 2</a>
				<ul>
					<li><a href="#">Menu 2 Submenu item 1</a></li>
					<li><a href="#">Menu 2 Submenu item 2</a></li>
					<li><a href="#">Menu 2 Submenu item 3</a></li>
				</ul>
			</li>

			<li><a href="#">Menu 3</a>
				<ul>
					<li><a href="#">Menu 3 Submenu item 1</a></li>
					<li><a href="#">Menu 3 Submenu item 2</a></li>
					<li><a href="#">Menu 3 Submenu item 3</a></li>
				</ul>
			</li>
		</ul>

#menu {
  width: 960px;
  height: 40px;
  clear: both;
}

ul#nav {
  float: left;
  width: 960px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

ul#nav li {
  display: inline;
}

ul#nav li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #880000;
  margin: 0;
  padding: 0 30px;
  background: #dc0000 url(../img/menu-parent.png) repeat-x;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

/* APPLIES THE ACTIVE STATE */
ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #330000;
  background: #bb0000;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}

/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nav  ul {
  display: none;
}

/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nav li:hover > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

ul#nav li:hover > ul li a {
  float: left;
  font: bold 1.1em arial,verdana,tahoma,sans-serif;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 1px #110000;
  margin: 0;
  padding: 0 30px 0 0;
  background: #aa0000 url(../img/menu-child.png) repeat-x;
}

ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}

Ok, solved!

Just look for a CSS dropline menu. Sliding doors as an option. Good luck.!

This is what I used to produce a HORIZONTAL wp_nav_menu. (no drop downs though – see my earlier link for drop downs)

Make sure this is in your functions.php

if (function_exists('register_nav_menus')) {
   	register_nav_menus(
		array(
			'main_nav' => 'Main Navigation Menu'
			)
		);
	}

place the wp_nav_menu where you want to in your code
<div id="information"><?php wp_nav_menu(array('menu' => 'Main Nav Menu', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>')); ?></div>

Add CSS
https://pastebin.com/SdpvYABV

One point to add: My menu in the wp admin area was called Main Nav Menu.
NOTE: <?php wp_nav_menu(array('menu' => 'Main Nav Menu',

You can follow any responses to simplify css code dropdovn menu.
1) Add a class parent for items that have a submenu
2) add depth class (depth0 , depth1, depth2 …)

add to function.php your theme

class DD_Wolker_Menu extends Walker_Nav_Menu {
	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
	    $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

now in header.php

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu replaced by the name of your menu

CSS simplified code may be the
[CSS moderated as per the Forum Rules. Please just post a link to your site.]

#menu-header-menu – id the main UL list

@stur

thanks for your short tutorial, but it doesn’t work on my site – can you tell what I did wrong?

here is fragment of my header:

<?php wp_nav_menu(array(
			'menu' => 'moje',
			'container_id' => 'menu-header-menu',
			'fallback_cb' => 'wp_page_menu',
			'walker'=> new DD_Wolker_Menu,
			)); ?>

and navigation fragment of my style.css:

[CSS moderated as per the Forum Rules. Please just post a link to your site.]

and the effect is here: https://testy.pazder.pl/

thanks for help

You should specify the horizontal orientation.
I give a link to the full code and an example of my theme.
https://www.wp.od.ua/en/?p=65
https://www.wp.od.ua/en/?p=49