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.

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.