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.

I have a menu setup at the moment for a site I'm building that I'd like to change a little the way it pops up and doesn't popup :P

At the moment, I hover over my main menu items if there are sub pages then a sub-menu pops up (standard wordpress I believe) I have other sub menues within this hierarchy that I'd like to list in this popup but not be a popup themselves... confused yet?

Here's a link to an image of what I'm trying to achieve http://www.elementmedia.com.au/stuff/menu.png

I could figure this out with a static site but I'm using WordPress as a CMS and would like to use the wordpress menu so it can be edited when required by my client if needed and I'm not too sure how it works with wordpress, Is it simply css controlled?

share|improve this question
    
I am pretty sure that what you are talking about is just CSS, which would be controlled by the theme. –  s_ha_dum Jan 14 '13 at 5:08
    
@s_ha_dum Thanks, I thought it may be now I just have to decipher what is going on as basically every ul is a popup. –  Bjorn Jan 14 '13 at 5:45
add comment

1 Answer 1

up vote 0 down vote accepted

Yes, you can easily control just using css. Complete guide about wp nav menu on wordpress codex. And my fast solution for this:

functions.php

add_theme_support('menus'); // Menus Support
register_nav_menus(array('main_menu' =>'Main Menu')); // Main Menu of Website

header.php

<nav id="menu">
    <?php wp_nav_menu(array('theme_location'=>'main_menu')); ?>
    <div class="clear"></div>
</nav>

style.css

/* Clearfix */
.clear {clear:both}

/* First Level */
nav#menu ul li {float:left; position:relative; text-transform:uppercase; list-style:none}
nav#menu ul li a {display:block; background:#152635; color:#fff; padding:5px 15px; font-size:14px;}

/* Second Level */
nav#menu ul li ul {display:none;}
nav#menu ul li ul li a {width:160px;}
nav#menu ul li:hover ul {display:block; position:absolute; top:26px;}

/* Third Level */
nav#menu ul li ul li ul li {list-style:inside square}
nav#menu ul li ul li ul li a {font-size:11px; color:#ddd}

Obviously you need edit the CSS according to your interest. Enjoy!

share|improve this answer
    
Thanks, I'll have a look at your code and see how I go. It's mainly the css I was wondering about. It's good to see how other people would achieve the same outcome. –  Bjorn Jan 30 '13 at 22:10
    
This has helped a lot but the wordpress menu is out of control. I can't even get a ul (sub items) inside a ul (main drop down) to show without jumping the menu all over the place, crazy. I think the template I've started with is unnecessarily complex. Perhaps I should build the menu myself from scratch :( –  Bjorn Mar 13 '13 at 0:48
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.