0

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?

Improve this question
2
  • I am pretty sure that what you are talking about is just CSS, which would be controlled by the theme.
    – s_ha_dum
    Commented Jan 14, 2013 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
    Commented Jan 14, 2013 at 5:45

1 Answer 1

Reset to default
1

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!

Improve this answer
2
  • 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
    Commented Jan 30, 2013 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
    Commented Mar 13, 2013 at 0:48

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.