Center a DropDown Menu Using CSS and jQuery

Create the markup

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

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/2.1.0/jquery.min.js?ver=3.8.2"></script>

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

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.

Tagged

14 Responses

  1. 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

  6. 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. 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. 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

  9. Hi Lucian,
    I’m trying to get the script to target the dropdown menus generated by jQuery Superfish in a WordPress site. It seems either I’m not targeting the right ul.class or ul#id – it’s disregarding the script somehow.
    I’ve added your script in the head of the site and it’s loading.

  11. And what about if the drop down window is smaller in width than the button? This doesn’t work…

  12. Here is the code I used to center a dropdown navigation using jQuery. Please keep in mind that I haven’t tested it cross-browser yet, but I thought I’d share in case anyone wants to use it.
    jQuery(“#navigation .sub-menu”).each(function(){
    var $this = jQuery(this),
    currentWidth = $this.outerWidth(),
    parentWidth = $this.closest(‘li’).outerWidth(),
    leftPos = (parentWidth / 2) – (currentWidth / 2);
    jQuery(this).css(“left”, leftPos);
    });

  14. Nice script! It doesn’t work properly when there’s padding / margin on the list item though.
    Easy solution: put padding or margin on the link.
    Kludge solution: Compensating manually
    var width = parseInt((child_width – the_width)/2)-10;
    for padding: 0 10px;

Comments are closed.