Menu horizontal - largeur de menu de li ai horizontal que j'ai de la ul enfant

avec des étiquettes de table/table-cell:Menu horizontal - largeur de menu de li ai horizontal que j'ai de la ul enfant

<!doctype html> 
<html> 
    <body> 
    <div style="width: 960px"> 
     <ul class="menu"> 
     <li><span>Selected Menu Item</span></li> 
     <li><a href="#item">Another Item</a></li> 
     <li><a href="#item">Another Item</a></li> 
     <li><a href="#item">Another Item</a></li> 
     </ul> 
    </div> 
    </body> 
</html>

Cela fonctionne très bien, mais je dois aussi sous-menus comme

<ul class="menu"> 
    <li><span>Selected Menu Item</span></li> 
    <li><a href="#item">Another Item</a> 
    <ul class="submenu"> 
     <li><a href="#sub">Submenu Item</a></li> 
     <li><a href="#sub">Submenu Item</a></li> 
    </ul> 
    </li> 
</ul>

maintenant, normalement je voudrais juste faire position: relative et le second niveau ul position: absolute de premier niveau li et lui donner la même taille que j'ai donné les éléments li; mais dans ce cas, je n'ai pas fixé avec le Li, alors j'ai essayé ceci:

.menu li { 
    position: relative; 
} 

ul.submenu { 
    position: absolute; 
    width: 100%; 
}

Mais ce n'est pas - comme je l'attendrais - étendre à la largeur de 100% de son parent (li), mais plutôt gagner la largeur de l'élément spécifié le plus proche (dans ce cas, la div avec largeur 960px je pense, mais il pourrait aussi être plus grand).

Ma question est: Est-il possible d'élargir le second niveau ul-élément à la largeur de son parent, le li style table-cell sans tomber JavaScript? Je suis conscient du fait que je devrais écrire un script pour les navigateurs désactivés, comme IE < = 7. Voici un exemple en cours d'exécution: http://jsfiddle.net/hy73d/

Edit # 1: Il a été porté à mon attention, que cela fonctionne réellement dans WebKit navigateurs et l'opéra; donc la vraie question serait, y at-il une solution pour gecko?

Source

2012-07-06 marc

Ce problème ne s'applique que dans Firefox. Chrome l'affiche comme vous le souhaitez (probablement). – YMMD

Firefox ne vous laissera pas give a relative position to table-cells. Utilisez un autre élément à l'intérieur de votre td et le rendre positionné relativement:

<ul class="menu"> 
    <li><span>Selected Menu Item</span></li> 
    <li><a href="#item">Another Item with Sub</a> 
    <div> 
     <ul class="submenu"> 
     <li><a href="#sub">Submenu Item</a></li> 
     <li><a href="#sub">Submenu Item</a></li> 
     </ul> 
    </div> 
    </li> 
    <li><a href="#item">Another Item</a></li> 
    <li><a href="#item">Another Item</a></li> 
</ul>

Et bien sûr appliquer que les règles CSS à votre nouvelle div:

.menu li { 
    display: table-cell; 
} 
.menu li div { 
    position: relative; 
    background: #444; 
}

Cela fonctionne mieux dans tous les navigateurs.

Source

2012-07-06 09:20:48 YMMD

Il est triste, que vous devez utiliser un balisage supplémentaire pour firefox; mais merci pour votre solution! – marc

Vous avez raison, mais c'est la conséquence naturelle d'utiliser un hack comme celui avec 'table-cell'. Un «li» flottant comme d'habitude ne se serait jamais comporté comme ça. :-) Mais bien sûr, je vois votre point de vue que vous ne pouvez pas utiliser des flottants afin de remplir dynamiquement toute la largeur de la 'ul'. Je suis heureux d'aider! – YMMD

En travaillant avec votre code j'ai compris pourquoi le ul est en expansion, c'est parce qu'il est positionné de manière absolue sur le corps et que sa largeur est de 100% correspond à la largeur du corps. Je le trouve plutôt plus logique que le comportement du chrome. Maintenant, en changeant la position à relativiser faire le conteneur ul réaliser son maintien un autre ul afin que ses éléments li se dilatent pour le couvrir, jetez un oeil http://jsbin.com/iwesoc/2/edit#preview Mais le problème ne peut être résolu simplement en mettant la hauteur des autres li à 0. Parce qu'ils sont hériter de la hauteur de l'ul. Donc, le plus proche que je pouvais obtenir est cette solution http://jsbin.com/iwesoc/2/edit#preview. Peut-être, c'est d'une certaine utilité.

Source

2012-07-06 09:52:49

Menu horizontal - largeur de menu de li ai horizontal que j'ai de la ul enfant

Répondre

Questions connexes