将中心菜单与其内容对齐

Question

我正在尝试将菜单上div 中的文本水平居中，并使用框大小。

类似这样的：

Link to see the image

我的问题是当我尝试放置position: absolute 子菜单时，正文不考虑左侧子菜单的大小和位置。

这是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>

CSS 很糟糕。

我怎样才能使主菜单居中，其子菜单与框大小有关？

在示例中，我使用table 制作，但我的想法是使用ul 和li 或divs 制作。

Answer 1

我注意到您说您正在考虑使用 ul/li 元素而不是 table，我认为这是一个好主意，尤其是对于导航类型的结构。从语义上讲，这就是导航菜单的含义，即链接的列表。

这里有一些菜单/子菜单文本居中的代码，它也保持隐藏的子菜单项的宽度。它不漂亮，您必须调整 css 以使其看起来非常完美！

如果内容 div 的位置不正确，请告诉我，我可能会想出一个解决方案。 ;)

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/