Выровнять центральное меню со своим содержанием

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, чтобы он выглядел довольно красиво!

Сообщите мне, если этот контент не установлен правильно, возможно, я смогу решить проблему. ;)

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/