Center a DropDown Menu Using CSS and jQuery

centered-dropdown

Maybe you have noticed that majority of the drop-down menus on the web, are aligned to the left of their containing parent. Using Jquery, we will position the dropdown in the middle of the parent, dynamically centered, no matter how long the parent’s link width gets. Since the dropdowns are positioned absolutely, the CSS margin: auto won’t help in our case.

Using this method, we can have an interesting design, with an arrow pointing up or you can come up with other design ideas. Also, for users without Javascript enabled in their browsers, the navigation will degrade gracefully and the positioning will be to the left of the parent.

View Demo


Create the markup

Go ahead and paste the following HTML code in your HTML file:

        	<ul id="nav">
            	<li><a href="#">Home</a></li>
                <li><a href="#">Apple News</a>
                	<ul>
                    	<li><a href="#">iPhone</a></li>
                        <li><a href="#">iMac</a></li>
                        <li><a href="#">Apple</a></li>
                    </ul>
                </li>
                <li><a href="#">iPhone App Reviews</a>
                	<ul>
                    	<li><a href="#">Echofon</a></li>
                        <li><a href="#">Shazam</a></li>
                        <li><a href="#">Urban Spoon</a></li>
                    </ul>
                </li>
                </ul>

Style the navigation and dropdown with CSS

The following CSS code, will ensure that the dropdown looks and works properly. Also we will add a pointer arrow image and do some CSS tricks, so we can have the arrow centered at the top of the dropdown.

/*main nav*/
#nav li {position:relative; float: left}
	#nav a {float:left; margin: 0 30px 0 0; padding: 5px 0 15px; font-size:1.4em; color: #9F8F79; text-decoration:none}
		#nav a:hover {color: #f2f2f2}
	/*dropdown*/
	ul#nav ul {display:none; position:absolute; top:36px; left: 0; padding: 8px 0 0; background: #e3e3e3 url(i/pointer-drop-down.png) no-repeat 50% 0; border-bottom: 1px solid #000; z-index:100;}
		ul#nav ul li {float: none; display: block; background: #5b544a; border-bottom: 1px solid #6e6659; border-right: 1px solid #000; border-left: 1px solid #000;}
		ul#nav ul li:first-child {border-top: 1px solid #000} /*dropdown*/
		ul#nav ul li:last-child {padding-bottom: 35px} 
			ul#nav ul li a {float: none; display:block; width: 148px; margin:0; padding: 5px 20px; background: #5b544a}
			/*the magic*/
			ul#nav li:hover ul, ul#nav li:focus ul {display: block}

The Jquery centers what CSS cannot

First we need to include the Jquery library. My preferred method, is by using the Google CDN, as it loads faster that way. At the top of your HTML file, within the head tag, add the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

The very next thing we need to add will be our code:

<script type="text/javascript">
	$(document).ready(function() {
		$("ul#nav li").mouseover(function() {
			var the_width = $(this).find("a").width();
			var child_width = $(this).find("ul").width();
			var width = parseInt((child_width - the_width)/2);
			$(this).find("ul").css('left', -width);
		});
	});
</script>

Browser support

It works well in all of the major browsers, including IE7+. In IE6 the drop-down does not show up but there are fixes for that and the dropdown will still show up centered, after we apply the fix.

Your opinion

Let me know how it works for you or if you have any questions regarding the method.

Related Posts


Like this article? Retweet!

8 Responses to “Center a DropDown Menu Using CSS and jQuery”

  1. manu3l9816, on August 30th, 2010 at 5:43 am Said:

    Hi Thank’s for this I’ve been looking for this solution for a long time, just one question, is it possible to animate the menu with a slidedown effect?

    Thank’s i hope you can help me with this

  2. Lucian Florian, on August 31st, 2010 at 12:56 pm Said:

    Yes, it is possible to animate it with a slidedown effect, or any other jQuery animation, but this is outside of the scope of this tutorial.

  3. manu3l9816, on August 31st, 2010 at 2:21 pm Said:

    well never mind, was more simple than I imagined, i use slide down and slide up

  4. kemar, on September 5th, 2010 at 1:37 pm Said:

    So what’s the IE6 fix? I was wondering if you could show it.

    Thanks!

  5. Lucian Florian, on September 7th, 2010 at 5:15 am Said:

    For IE6 fix you can read the article from AlistApart: http://www.alistapart.com/articles/dropdowns

  6. manu3l9816, on October 2nd, 2010 at 2:58 pm Said:

    Hi I’m having a little problem with this code and a mootools script called mediaboxadvanced.

    The problem is only in IE7 and above, if include the mootools script the submenu appears but not in it’s place, if i remove the mootools script then the menu work again, if i leave the mootools script and remove your code then the menu appears in the right place (not centered).

    I really don’t know how can i fix this, in all the other browsers your code and mootools work fine.

    Is there any other way to center the submenu but with a different code?

  7. Lucian Florian, on October 2nd, 2010 at 3:16 pm Said:

    From what I know, it is not recommended to mix the JavaScript libraries, as you get conflicts. Try to accomplish the other effect using jQuery alternative.

  8. Ann K, on October 18th, 2011 at 7:59 am Said:

    Thank you! very helpful.

    I wasn’t using any right or left margins on my li’s only padding so I had to add a little more math to this line: var width = parseInt((child_width – the_width)/2); to add in the amount for the padding right and left that I was using.

    -Ann

Leave a Comment