css taille correctif nécessaire, s'il vous plaît

Question

J'essaie de faire un menu de toutes sortes.

le code est disponible ici: http://jsfiddle.net/Chumillas/WyA3U/ (merci Chumillas pour moi l'enseignement à ce sujet)

si vous vérifiez le résultat via le lien ci-dessus, vous verrez qu'il ya un problème de conception avec ce code - tous les éléments visibles du menu doivent avoir la même longueur (75px) et cela ne regarde pas embellissent les distances entre les sont inégales:

.titleCell 
{ 
    width: 75px; 

comment puis-je corriger de telle sorte que la longueur est en réalité celle de la contenu (+ padding) au lieu d'avoir à fixer à 75px de sorte que les distances entre les éléments de menu sont les mêmes?

• modifier -

si elle ne peut pas être fait, je serais heureux avec un lien vers une chose semblable en ligne. THNX à nouveau

• EDIT 2 -

si quelqu'un se demande où je suis arrivé cette chose à l'origine de: http://www.devinrolsen.com/css-hide-and-display-content/

Answer 1

Vous pouvez supprimer position:absolute de .titleCell strong et changer le padding-left-padding-right avec une plus grande valeur , quelque chose comme 40px. Retirez également le width de .titleCell

Voici une démo: http://jsfiddle.net/ktCb8/

En tant que conseiller, ne pas appliquer les règles pour la balise strong. Style le parent div ou le parent li.

Answer 2

Bien que vous ayez déjà accepté une réponse, j'ai fait une mise à jour de votre Fiddle avec quelques corrections de mise en page que vous pourriez vouloir implémenter.

Jetez un oeil à: http://jsfiddle.net/WyA3U/3/

Answer 3

My two cents — plus propre/moins des deux mondes:

#contentBox { position: relative; font-size: 80%; } 
 
#contentBox > li 
 
{ 
 
    display: inline; 
 
    padding: 6px; 
 
    margin: 0 1px; 
 
    cursor: pointer; 
 
} 
 
#contentBox > li:hover, #contentBox ul 
 
{ 
 
    border: 1px solid #CCC; 
 
    background-color: #FFF; 
 
} 
 
#contentBox > li:hover { 
 
    border-bottom-color: #FFF; 
 
    margin: 0; 
 
} 
 
#contentBox > li:hover ul 
 
{ 
 
    display: block; 
 
} 
 
#contentBox ul 
 
{ 
 
    position: absolute; 
 
    display: none; 
 
    border-width: 1px; 
 
    width: 500px; 
 
    padding: 6px; 
 
    cursor: default; 
 
    margin-top: 6px; 
 
    z-index: -1; 
 
}

<ul id="contentBox"> 
 
    <li> 
 
     Go 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Quickly jump to your desired location 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Messages 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Access personal and system messages and alerts 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Assets 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Manage your assets 
 
       </h1> 
 
       Lorem ipsum dolor sit amet. </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Support 
 
     <ul> 
 
      <li> 
 
       <h1> 
 
        Need help? 
 
       </h1> 
 
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</li> 
 
     </ul> 
 
    </li> 
 
</ul>