將中心菜單與其內容對齊

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元素而不是表格，我認爲這是個好主意，尤其是對於導航類型的結構。在語義上，這是一個導航菜單，列表的鏈接。

下面是一些以菜單/子菜單文本爲中心的代碼，它也保留了隱藏子菜單項的寬度。這不是很漂亮，你必須調整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/