live site.

I'm using wp_nav_menu called "blog-nav". It's displaying ok, however I'd like to have it horizontally oriented and with sub-menu drop downs(all lower cased items should be in the drop down portion). I've searched around various posts here, alistapart.com, etc but nothing seems to work quite right. I mist be missing something?

Here's what I'm using-


    add_theme_support( 'menus' );


<div id="container">
    <div id="blog-header">
        <div class="logo">
            <h1><a href="<?php echo get_option('home'); ?>"/><img src="<?php bloginfo('template_directory'); ?>/img/blog-logo.png" alt="#" /></a></h1>
        </div><!-- end logo -->

        <div class="blog-nav"><?php wp_nav_menu(array('menu' => 'blog-nav', 'container' => false, 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>')); ?></div><!-- end blog-nav -->

    </div><!-- end blog-header -->


#access ul ul { display: none }
#access ul li:hover > ul { display: block }

Any ideas to make this all come together?

2 Answers 2


As you din't post any live site with the example of menu, so if I don't get you wrong, then a nice dropdown menu like this:

| Menu 1 | Menu 2 | Menu 3 |
         | Sub Menu 1 |
         | Sub Menu 2 |

can be attained easily by using THIS menu CSS. Though it's raw HTML, CSS, but it's pretty usable in WordPress too. :)

  • The link to the live site is the very first line of the question. Commented Sep 8, 2013 at 0:16
  • But that's not an example of a menu you may like. :/ Commented Sep 8, 2013 at 0:19
  • See this category button for an example of exactly what I'm looking for. johnbenavente.com.au/blog Commented Sep 8, 2013 at 0:27
  • :) Then say me you've used the code I've suggested. It's the same thing here. Just use it instead of any menu code. Commented Sep 8, 2013 at 0:40
  • I need a strictly WP solution, using the HTML method would create trouble down the road if links were to ever change. Commented Sep 8, 2013 at 0:47

You missed the proper stucture of your elements:

#access ul li ul { display: none }
#access ul li:hover > ul { display: block }

And you might want to position the sub menu to the right so that it wont be annoying when visitors try to hover on the other menus like:

#access ul li ul { display: none; position: relative; }
#access ul li:hover > ul { display: block; position: absolute; top: 0; right: 0; }
  • Thank you for pointing out what I missed. I've implemented your code, but still my problem persists. Any ideas? Commented Sep 8, 2013 at 0:20

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.