Beautiful Apple Style Dropdown Menu

UPDATE — While this article may still hold some value, it is pretty dated. To see the very last incarnation of this menu’s code, download the Startup theme. You can also find my very latest (2015 onward) menus in the GenericTools code samples.

Last Updated Aug 5th, 2012 — If you’re not an Apple fan or want a custom look, no worries, the CSS styles I’ve written are very easy to strip down or swap out with the ones you want. This code works in all the latest versions of Firefox, Chrome, Safari, and even IE.

This menu is based on my original vanilla dropdown menu script found here.

View Demo

If you want to change the styles of the different levels, see the last three lines of CSS:

#nav ul li:hover ul li a{}

Defines the first dropdown level styles.

#nav ul ul li:hover ul li a{}

Defines the second dropdown level styles.

#nav ul ul ul li:hover ul li a{}

Defines the third dropdown level styles.

CSS

#nav{position:relative;padding-left:4px;border-radius:5px;background:#555 url(images/nav-bg.png) repeat-x;z-index:2147483647}
#nav .parent > a, #nav .parent > a:hover{background-image:url(images/arrow.png);background-position:right;background-repeat:no-repeat}
#nav ul, #nav ul li{display:inline;list-style:none;padding:0;margin:0}
#nav ul li a{display:inline-block;font-family:'Lucida Grande',Helvetica,Arial,Verdana,sans-serif;font-size:14px;color:#fff;line-height:36px;text-decoration:none;text-shadow:1px 1px 1px #333;padding:0 15px;margin-left:-4px;border-right:#777 1px solid}
#nav ul li a:hover{box-shadow:inner 0 0 5px #000;-moz-box-shadow:inset 0 0 5px #000;-webkit-box-shadow:inset 0 0 5px#000;background:#444}
#nav ul #first a:hover{border-radius:5px 0 0 5px}
#nav ul li{position:relative}
#nav li ul{display:none;position:absolute;top:25px;left:7px}
#nav li ul a{background:#555}
#nav ul ul li:hover ul, #nav ul ul ul li:hover ul{left:0}
#nav ul li:hover ul{display:inline-block}
#nav ul ul, #nav ul li:hover ul ul, #nav ul ul li:hover ul ul{display:none}
#nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul{display:block}
#nav ul li:hover ul li a, #nav ul ul li:hover ul li a, #nav ul ul ul li:hover ul li a{border:#777 1px solid;margin:-1px 0 0 -11px}
#nav ul li:hover ul li a{width:150px;padding:0 14px}
#nav ul ul li:hover ul li a{width:145px;padding:0 14px 0 19px}
#nav ul ul ul li:hover ul li a{width:140px;padding:0 14px 0 24px}

HTML

<div id="nav">
<ul>
<li id="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="parent"><a href="#">Parent</a>
<ul>
<li><a href="#">Subpage 1</a></li>
<li><a href="#">Subpage 2</a></li>
<li><a href="#">Subpage 3</a></li>
<li class="parent"><a href="#">Parent 2</a>
<ul>
<li><a href="#">Subpage 1</a></li>
<li><a href="#">Subpage 2</a></li>
<li><a href="#">Subpage 3</a></li>
<li class="parent"><a href="#">Parent 3</a>
<ul>
<li><a href="#">Subpage 1</a></li>
<li><a href="#">Subpage 2</a></li>
<li><a href="#">Subpage 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Graphics

Notes

In case you’re wondering what z-index:2147483647 is all about, it’s basically the highest z-index there is as a safe bet to ensure that the menu doesn’t fall behind other elements, across all browsers.

Adding the Menu to a WordPress Theme

As with any code I write and share, my main goal is to use as little code as possible and as simple of code as possible to get it done and to avoid hacks and JavaScript. But unfortunately, if you want the arrow indicators in a WP theme you’ll need to use a bit of jQuery.

Add the following to the <head></head> area of your header.php file:

<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>

Then, in the same file, add:

<div id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
<script type="text/javascript">jQuery("ul").parent("li").addClass("parent");</script>
</div>

Then, add the following to your functions.php file:

register_nav_menus(
array( 'main-menu' => __( 'Main Menu', 'yourthemename' ) )
);

You can now set up your custom menu under Appearance > Menus in your WP admin.

Please, share any issues or suggestions you may have to improve the code.

  • justuser

    Hi !

    Excellent tutorial

    I am trying to use it in a WordPress Installation on my localhost. The theme I am using is know as Responsive theme( Themeid.com ) and copied the code( I have replaced all the #nav with .menu). Copied the other tags exactly as you suggested . Can you please tell me where I am mistaken

    Attached the header.php link here(Uploaded to ge.tt) : http://ge.tt/66MoroK/v/0

    Thanks

  • Apologies that I didn’t reply sooner. I wasn’t getting new comment notifications. Can I get the link to your live site where you’re testing this?

    I’m actually going to update the code soon as well.

    Thanks, Bryan

  • I’ve updated the code and instructions.

  • Stefan Meyer

    Cool, but all menus, including this, dosnet work on apple devices like ipad mini or iphone. the menu dosent close alwys , wen i levae the menu or click a submenupoint.

  • “Doesn’t work” is always a loaded statement because it can mean any number of things. Usually it’s subjective in the sense that the person means that it doesn’t work the way THEY want it to, in which case I really would have no idea.

    If you could, please explain specifically what you mean and I’d be happy to look into it.

    Thanks, Bryan

  • kross3

    Hello all,

    I recently got a site that has a similar menu. At this time I have followed the directions listed here:
    -Added CSS to my menu.css file
    -noticed I already had a “” (skipped), added the javascript file to my header
    -updated my functions file accordingly
    -finally I created and adjusted my menu from within word press

    This fixed my original issue I’ve had with adding drop downs. But now I’ve noticed that my search box is missing and now the structure is out of line. I have a limited knowledge of CSS and this appears to be holding me back.

    At this point I’m will to try anything to get this fixed.

    Thank you all for your time.

  • What theme/template are you using? If a custom design, what’s your site link?

  • kross3
  • Actually, nothing is out-of-line in the design. It’s an optical illusion. The background image needs to be adjusted so the middle black portion is perfectly center and the exact size of (or larger) the #wrapper, 1005px.

    For nav ul li a update the color decleration to:

    color: #fff !important;

    Couple more adjustments are likely needed, but that should be a good start.

  • kross3

    THANKS! trying now!

  • kross3

    Bryan that worked, now I noticed that my search box is missing, my second menu as seen on the home page isn’t aligned correctly how it originally was.

    Is it possible for you either walk me through how to fix these three issues or are you’re willing to set a remote session with me, if that would be great I’ve included my email at guest sign up, if you need me to sign up so you can get I will.

    Once you’ve gotten my email address, could you please email me and I will send you a ZoHo remote assist request so we can get these last couple of things fixed that’s been killing me.

    If you want to be compensated I have no problem doing so via paypal.

    Please advise.

    Thanks again for all your help so far,

    KRoss

  • kross3

    I fixed my issues, except for displaying the search box. I would still like to review my site in detail with someone who has more coding experience; if your still interested please feel free to email me and let me know how you would like to be compensated. Thanks again!

  • Sorry, not available to work on this, but you can reference a fully functioning version of the menu with improvements in the Startup WordPress theme:

    https://startupwp.com/startup-wordpress-theme/

    Thank you.