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