Center content on a full-width dropdown menu

Hi all,

I am working on the following project: Click here to view website It is being built using Wordpress.

If you hover over the Tailoring link in the top navigation, you will see a drop-down menu with thumbnails. This dropdown menu is powered by a plugin called Ubermenu. I have adjusted the CSS to make the drop-down menu stretch across the full-width of the screen. However the problem is that the content of the drop-down menu is positioned on the left. How can I get the content of the drop-down menu to appear nicely in the center of the page?

Thanks in advance,

GKTareen

Hi.

If I'm reading the (slightly over-complicated) code correctly, the items are in a menu called sub-menu which is absolutely positioned. You probably don't have to absolutely position it. You could leave it a block and set a width smaller than the width of the screen and use auto-margins to center it.

However if the items' number can vary (can more be added?), then it might be safer to do something like...

If you leave the submenu abso-po'd, make it 100% width of its parent (seems it already is) and give it text-align: center. This won't center it, but if you then make each li display: inline-block (instead of float), they'll take on the inline nature of being affected by the text-align on their parent, while also retaining block nature by being able to have dimensions set.

IE 6, and 7 don't like inline-block on naturally block elements like li's. If you are not supporting them then the above should work. If you are supporting them let me know.

Give it try and see how it goes. I would, for while testing, force the parent thing to remain display: block (instead of none) so you can always see it instead of having to mouse over it all the time. Then I'd give your submenu ul an ugly background colour like #f00 so you can see exactly where its dimensions are.

Hi,

remove the float:left from the following rule and it should center automatically.

Code:

---

#megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
  display: inline-block;
 /* float:left;*/ 
 margin-bottom: 5px;
  margin-top: 5px;
  position: relative;
}

---

Quote:

---

Originally Posted by Paul O'B

Hi,

remove the float:left from the following rule and it should center automatically.

Code:

---

#megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
  display: inline-block;
 /* float:left;*/ 
 margin-bottom: 5px;
  margin-top: 5px;
  position: relative;
}

---

---

Wow, that was awfully simple. Thank you very much Paul. Much appreciated!

GKTareen

If youe need to support IE6 and 7 you will need this fix:

Code:

---

#megaMenu li.ss-nav-menu-mega ul.sub-menu-1 > li {
  display: inline-block;
*display:inline;/* ie6/7 invalid hacks*/
zoom:1.0; /* ie6/7 invalid hacks*/
/* float:left;*/ 
 margin-bottom: 5px;
  margin-top: 5px;
  position: relative;
}

---