Centering a Drop-Down Menu

Mar 9, 2011 11:13 am

Just a quick tip that you may already be aware of, but I thought I would share as we have been using this tip for some time on sites that have a horizontal menu with just a few items. By default, a horizontal menu with drop-downs will align the menu items to the left (using the Menu Style wizard feature), but the menu will look better if the menu items are centered in the available space. So, to do this all you need to do is add a little bit of additional html to the menu tag and add a few styles.

HTML

<div id="menu_main"><div>[[menu_html]]</div></div><!-- end menu_main -->

Basically, I added a wrapper and an extra <div> around the [[menu_html]] tag. I know you can simplify this, but I just prefer to use this format as it adds some flexibility for some of the design elements.

CSS

#menu_main div { position:relative; left:-50%; float: right; }
#menu_main ul { position:relative; left:50%; }
#menu_main li { float:left;position:relative;}/* ie needs position:relative here*/

#menu_main ul ul { position:absolute; left:0; }
#menu_main li li { float:left;position:relative;}/* ie needs position:relative here*/
#menu_main ul ul ul { position:absolute; left: 200px; }

Just add this CSS to your stylesheet with the rest of your menu CSS. Make sure that you use the appropriate name for the menu. And, you need to set the "left: 220px;" to the same value set at the end of the menu CSS, for example:

ul.menu_main ul ul,
ul.menu_main ul ul ul { display: none; position: absolute; top: 0; left: 200px; }

You may need to add some additional style settings for a width on the main site container and set overflow to hidden as sometimes in IE, the horizontal scroll bar appears at the bottom of the browser.

Hope this helps.