changer la position absolue de gauche à droite sur une balise span selon la classe

Question

Ceci est ma première question ici, mais je suis sûr qu'il ya beaucoup plus à venir. J'ai un petit problème de position que j'aimerais savoir si c'est possible.

J'ai une liste non ordonnée (<ul>) avec flottaient <li> s, pour les principales options i Float ces gauche, et pour les options de contact et de soutien que je les flotteur droit, jusqu'à présent si bon. Maintenant, j'ai un <span> l'intérieur de chaque <li> que j'afficher dans la liste horizontale, la liste est pour un menu. Ces <span> de travaux que la description au choix du menu et les options normales que j'utilise position:absolute; top:30px; left:0; cela fonctionne comme suspect. Maintenant, je voudrais changer les attributs de position pour ces éléments de menu que je flotte à droite afin que l'envergure obtienne position:absolute; top:30px; right:0; et cela ne fonctionne pas du tout. Il semble qu'il est impossible de changer cela avec une règle css plus spécifique que l'autre, mais le flotteur fonctionne très bien.

le code html:

<div id="menu"> 
<ul> 
    <li>Menu1<span>Info1</span></li> 
    <li>Menu2<span>Info2</span></li> 
    <li class="support">Support1<span>Info3</span></li> 
</ul> 

Le css:

#menu{position:relative;} 
#menu ul{list-style:none;} 
#menu ul li{float:left;} 
#menu ul li.support{float:right;} 
#menu ul li span{display:none;} 
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;} 
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0} 

La dernière ligne du css ne font aucune différence! Si quelqu'un a une réponse ou un travail, j'apprécie grandement l'aide.

Question réponse et le problème est résolu. Vérifiez James Arons ou les messages de mercator.

Answer 1

Même si vous avez défini right:0, votre left:0 est toujours héritée. Vous devez définir left:auto pour remplacer ce style pour la classe support.

Answer 2

Hmm bizarre. Je ne peux pas vous dire pourquoi votre code ne fonctionne pas, devrait fonctionner depuis le support: hover span est un sélecteur plus spécifique.

trouvé une solution bien: éléments absolus de position reste-: 0; par défaut. Si vous supprimez à gauche: 0; à partir du sélecteur de portée, cela fonctionnera.

Votre code ressemblerait à ceci:

#menu{position:relative;} 
#menu ul{list-style:none;} 
#menu ul li{float:left;} 
#menu ul li.support{float:right;} 
#menu ul li span{display:none;} 
#menu ul li:hover span{display:block; position:absolute; top:30px;} 
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0} 

Answer 3

A en juger par ce que CSS, vous ne semblez pas comprendre correctement CSS, ou que vous ne l'utilisez pas correctement au moins. Vous pourriez vouloir lire l'article de SitePoint au sujet de the cascade, specificity and inheritance pour une bonne introduction.

La raison pour laquelle cela ne fonctionne pas est que les dernières deux lignes de ce CSS s'appliquent aux éléments de la liste avec la classe support. L'avant-dernière ligne s'applique à tous les éléments de la liste, et la dernière ligne ajoute à cela pour les éléments de la liste support. Donc, puisqu'il n'y a pas de propriété left dans cette dernière ligne, la propriété left cascades vers le bas de la ligne précédente, ce qui en fait left: 0aussi.

Lorsque vous utilisez une classe pour marquer un cas particulier, vous ne devriez pas répéter tout le CSS du cas général, mais fournir seulement les CSS nécessaires pour changer:

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;} 
#menu ul li.support:hover span {left:auto; right:0;} 

Ce CSS signifie que les éléments de la liste de classements support obtiennent tous les éléments CSS des autres éléments de la liste, mais que la propriété left est réinitialisée par défaut et que la propriété right est définie à la place.