Align center menu with its content

Question

I'm trying center horizontal the text within a div on a menu, with the box size.

Something like this:

Link to see the image

My problem is when I try to place the position: absolute submenu, the main text does not respect the size and positions of the submenu to the left.

Here is the code in jsFiddle.

<div id="menu">
<div>
    <table>
        <tr>
            <td>Nosotros</td>
        </tr>
        <tr>
           <td> 
             <a>La empresa</a>
             <a>Homologaciones</a>
             <a>Contacto</a>
           </td>
        </tr>
    </table>
</div>
<div>
    <table>
        <tr>
            <td>Servicios</td>
        </tr>
        <tr>
            <td>
              <a>Especialidades</a>
              <a>Vigilancia de la salud</a>
              <a>Formación</a>
            </td>
        </tr>
    </table>
  </div>
</div>
<div>Content div</div>

The CSS is on the fiddle.

How could I center the main menu with its submenu respecting the box size?

In the example, I made it with table, but my idea is make this with ul and li or divs.

Answer 1

I noticed you said you were thinking about using ul/li elements instead of table, I think this is a good idea, especially for navigation type structures. Semantically that's what a nav menu is, a list of links.

Here's some code that has centered menu/submenu text, that also keeps the width of the hidden submenu items. It's not pretty, you'll have to tweak the css to make it look pretty perfect!

Let me know if that content div isn't positioned right, I could probably work up a solution. ;)

HTML:

<div id="menu_wrapper">
        <ul id="menu">
            <li>Nosotros
                <ul class="submenu">
                    <li><a>La empresa</a></li>
                    <li><a>Homologaciones</a></li>
                    <li><a>Contacto</a></li>
                </ul>   
            </li>

            <li>Servicios
                <ul class="submenu">
                    <li><a>Especialidades</a></li>
                    <li><a>Vigilancia de la salud</a></li>
                    <li><a>Formación</a></li>
                </ul>   
            </li>
        </ul>
</div>
<div>Content div</div>

CSS:

ul
{
    list-style-type:none;    
}

li
{
    border:1px solid black;
    text-align:center;
}

.submenu
{
    padding:0;
    visibility:hidden;
    height:0;
}

#menu > li
{
    display:inline-block;
    border:1px solid black;
}

#menu > li:hover .submenu
{
    visibility:visible;
}

JFiddle: http://jsfiddle.net/U3sEL/7/