Home/ Questions/Q 4118454
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T22:57:45+00:00

I have the following CSS/HTML setup http://jsfiddle.net/UDAUY/ How do I align the drop down

  • 0

I have the following CSS/HTML setup http://jsfiddle.net/UDAUY/

How do I align the drop down menu field to center itself under the parent tab like this

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
    | Field 1 | Field 2 |
    ---------------------

instead of this,

| MENU 1 | MENU 2 | MENU 3 | MENU 4 |
-------------------------------------
         | Field 1 | Field 2 |
         ---------------------

which is how it looks right now. Also, can I set the width of the submenu ul container to adjust dynamically? Right now, I’ve set it to an arbitrarily high value, which works for all practical purpose, but would like to know if this is possible.

EDIT

I’ve added a bounty in the hopes of attracting better answers. I’m looking for a CSS only approach (no JS), and with relative units, not absolute. Also, the number of fields shouldn’t matter (You don’t have to worry about extremely long/wrapping issues.. However, changing from 2 to 4 shouldn’t alter the centering).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a pure css centering that’s “almost” done.

    http://jsfiddle.net/gNanu/

    It works for a dynamic amount of submenu items and centers properly as long as we have display: block on the wrapper. Once we remove that and hide the submenu, it gets a bit scewed. I will look at it a bit more and see if i can do anything else.

    Edit:

    This is probably the best you can do with css.
    http://jsfiddle.net/gNanu/4/

    It doesn’t center perfectly sometimes, and i haven’t done any cross browser testing.

    • 0