positionnement, taille de bloc et arrière-plan dans un menu déroulant CSS

Question

Cela peut être facile. J'ai regardé les questions précédentes (et d'autres endroits sur le web) mais je ne trouve pas une bonne solution pour mon problème actuel.

J'essaie d'avoir un menu déroulant centré avec CSS basé sur une liste. Rien de très compliqué.

Cette one a une solution très simple pour cela, mais je ne peux pas trouver ce que je fais mal.

J'ai deux problèmes à ce stade (il est principalement dans la première liste, n'ont pas encore vraiment regardé les liens dans la liste): (1) Je voudrais que la liste descendant ait un fond comme un grand rectangle englobant tous les éléments de la sous-liste (2) les éléments de la sous-liste sont "tronqués", une nouvelle ligne est insérée de sorte que la largeur ne dépasse pas la largeur du titre de la liste.

Merci.

La partie CSS

#navbar ul { 
    text-align: center; 
    width: 100%; 
    font-variant: small-caps; 
    padding: 5px 0; 
    margin-top: 0; 
    margin-left: 0; 
    } 
#navbar ul li { 
    background-color: #ccc; 
    margin-right: 2%; 
    color: #069; 
    text-decoration: none; 
    position: relative; 
    display: inline; 
    padding: 5px 4px; 
    } 
#navbar li a { 
    text-decoration: none; } 
#navbar li ul { 
    display: none; 
    } 
#navbar li:hover ul, #navbar li.hover ul { 
    display: block; 
    position: absolute; 
    text-align: left; 
    margin: 8px 0 0 0; 
    padding: 0; 
    background-color: #eee; } 
#navbar li:hover li, #navbar li.hover li { 
    padding: 4px 0; 
    clear: left; 
    } 
#navbar li:hover li a, #navbar li.hover li a { 
    background-color: #eee; 
    border-bottom: 1px solid #fff; 
    color: #000; } 
#navbar li li a:hover { 
    background-color: #333; } 

La partie HTML

<div id="navbar"> 
    <ul> 
     <li> 
      <a href="#" title="">Link 1</a> 
     <ul> 
       <li>item 1.1 and more</li> 
       <li>item 1.2</li> 
       <li>item 1.3</li> 
       <li>item 1.4 truncated?</li> 
       <li>item 1.5</li> 
       <li>item 1.6</li> 
     </ul> 

     </li> 
     <li> 
      <a href="#" title="">Link 2</a> 
      <ul> 
       <li><a href="#" title="">Link 2.1</a></li> 
       <li><a href="#" title="">Link 2.2</a></li> 
       <li><a href="#" title="">Link 2.3</a></li> 
       <li><a href="#" title="">Link 2.4</a></li> 
       <li><a href="#" title="">Link 2.5</a></li> 
       <li><a href="#" title="">Link 2.6</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#" title="">Link 3</a> 
      <ul> 
       <li><a href="#" title="">Link 3.1</a></li> 
       <li><a href="#" title="">Link 3.2</a></li> 
       <li><a href="#" title="">Link 3.3</a></li> 
       <li><a href="#" title="">Link 3.4</a></li> 
       <li><a href="#" title="">Link 3.5</a></li> 
       <li><a href="#" title="">Link 3.6</a></li> 
     </ul> 
    </li> 
</ul> 
</div> 

Answer 1

1) Il semble que vous avez déjà un rectangle d'arrière-plan. Voulez-vous juste plus de rembourrage? Si oui, ajoutez un rembourrage comme ceci:

#navbar li:hover ul, #navbar li.hover ul {padding:10px}

2) Quant à tronquer, essayez

#navbar li:hover ul, #navbar li.hover ul {word-wrap: break-word;}

Je voudrais cependant vous suggère de considérer jeter un oeil à cet article pour vous aider avec des menus déroulants: http://matthewjamestaylor.com/blog/centered-dropdown-menus

EDIT: Malheureusement, word-wrap est une propriété CSS3 et n'est pas supporté par tous les navigateurs. De plus, le retour à la ligne avec cross CSS ne semble pas trivial. Cet article word wrap in css/js a plus d'informations.