ändern, um die absolute Position von links nach rechts auf einem span-Tag je nach Klasse

Question

Dies ist meine erste Frage hier, aber ich bin sicher, es gibt viel mehr zu kommen. Ich habe eine kleine Position Problem, dass Ich mag würde wissen, ob es überhaupt möglich ist, zu erreichen.

Ich habe eine ungeordnete Liste (<ul>) mit schwebten <li>s, für die wichtigsten Optionen i diese links schweben, und für den Kontakt und Support-Optionen, die ich schweben sie richtig, so weit so gut. Jetzt habe ich eine <span> in jedem <li>, die ich unter der horizontalen Liste angezeigt wird, ist die Liste für ein Menü. Diese <span>s arbeitet als Beschreibung Menüwahl und für die normalen Optionen, die ich position:absolute; top:30px; left:0; dies als vermutet funktioniert. Nun würde Ich mag die Position für die Menü-Attribute Elemente ändern, die ich richtig schwimmen, so dass die Spanne position:absolute; top:30px; right:0; bekommt und dies nicht bei allen. Es scheint, wie es unmöglich ist, dies mit einer spezifischeren CSS-Regel zu ändern, dann das andere, doch der Schwimmer funktioniert super.

Die 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>

Die 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}

Die letzte Zeile in der CSS macht keinen Unterschied! Wenn jemand eine Antwort oder eine Arbeit hat um Ich schätze die Hilfe.

Frage beantwortet und Problem gelöst. Prüfen James Arons oder Mercators Beiträge.

Answer 1

Auch haben Sie setzen right:0, Ihre left:0 noch vererbt wird. Sie müssen left:auto einstellen, dass Stil für die support Klasse außer Kraft zu setzen.

Answer 2

Geht man von diesem CSS, scheinen Sie nicht CSS richtig zu verstehen, oder Sie verwenden sie nicht korrekt zumindest. Vielleicht möchten Sie die Sitepoint Artikel über der Kaskade, Spezifität und Vererbung für eine gute Einführung lesen.

Der Grund, dass nicht der Fall funktioniert, weil die letzten zwei Linien dieses CSS auf die Listenelemente mit der support Klasse gelten. Die zweite zu letzten Zeile gilt für alle Listenelemente und die letzte Zeile fügt dann zu, dass für die support Listenelemente. Also, da gibt es keine left Eigenschaft in der letzten Zeile, die left Eigenschaft Kaskaden aus der vorherige Zeile, so dass es left: 0 zu .

Wenn Sie eine Klasse verwenden einen speziellen Fall zu markieren, sollten Sie nicht alle CSS des allgemeinen Fall wiederholen, sondern nur die CSS, die notwendig sind, es zu ändern:

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

Das CSS bedeutet die support-Klasse Listenelemente der anderen Listenelemente, aber mit der left Eigenschaft zurückgesetzt auf Standard und die right Eigenschaft stattdessen alle CSS erhalten.

Answer 3

Hmm komisch. Ich kann Ihnen nicht sagen, warum Ihr Code nicht funktioniert, sollte da die Unterstützung arbeiten. Hover-Spanne ein spezifischeres Selektor

Gefunden ein Update aber: Position absolute Elemente noch übrig: 0; standardmäßig. Wenn Sie links entfernen: 0; von der Spannweite Wähler wird es funktionieren.

Der Code würde wie folgt aussehen:

#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}