Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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-

functions.php

<?php
    add_theme_support( 'menus' );
?>

header-blog.php

<body>
<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 -->

style.css

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

Any ideas to make this all come together?

share|improve this question
add comment

2 Answers 2

up vote 1 down vote accepted

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. :)

share|improve this answer
    
The link to the live site is the very first line of the question. –  user1255049 Sep 8 '13 at 0:16
    
But that's not an example of a menu you may like. :/ –  Mayeenul Islam Sep 8 '13 at 0:19
    
See this category button for an example of exactly what I'm looking for. johnbenavente.com.au/blog –  user1255049 Sep 8 '13 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. –  Mayeenul Islam Sep 8 '13 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. –  user1255049 Sep 8 '13 at 0:47
show 3 more comments

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; }
share|improve this answer
    
Thank you for pointing out what I missed. I've implemented your code, but still my problem persists. Any ideas? –  user1255049 Sep 8 '13 at 0:20
    
Please use format buttons above editor, Thank you –  iEmanuele Sep 8 '13 at 0:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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