Ändern Sie die absolute Position von links nach rechts auf einem Span-Tag abhängig von der Klasse

Question

Dies ist meine erste Frage hier, aber ich bin mir sicher, es gibt noch viele weitere zu kommen. Ich habe ein kleines Positionsproblem, dass ich gerne wissen würde, ob es überhaupt möglich ist.

Ich habe eine ungeordnete Liste (<ul>) mit floated <li> s, für die Hauptoptionen schwebe ich diese links, und für die Kontakt- und Unterstützungsoptionen schwebe ich sie richtig, so weit so gut. Jetzt habe ich eine <span> innerhalb jeder <li>, die ich unter der horizontalen Liste anzeigen, ist die Liste für ein Menü. Diese <span> s funktioniert als Beschreibung zur Menüauswahl und für die normalen Optionen, die ich position:absolute; top:30px; left:0; verwende, funktioniert dies als vermutet. Jetzt möchte ich die Positionsattribute für jene Menüpunkte ändern, die ich richtig schwebe, so dass die Spanne position:absolute; top:30px; right:0; bekommt und das überhaupt nicht funktioniert. Es scheint, dass es unmöglich ist, dies mit einer spezifischeren CSS-Regel zu ändern, aber der Float funktioniert großartig.

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 machen keinen Unterschied! Wenn jemand eine Antwort oder eine Arbeit hat, schätze ich die Hilfe sehr.

Frage beantwortet und Problem gelöst. Sieh dir die Beiträge von James Arons oder des Mercators an.

Answer 1

Selbst wenn Sie right:0 einstellen, wird Ihre left:0 noch immer vererbt. Sie müssen left:auto festlegen, um diesen Stil für die Klasse support zu überschreiben.

Answer 2

Hmm seltsam. Ich kann dir nicht sagen, warum dein Code nicht funktioniert, sollte seit der Unterstützung funktionieren: hover span ist ein spezifischerer Selektor.

Gefunden ein Update: Position absolute Elemente wurde links: 0; standardmäßig. Wenn Sie entfernen: 0; aus dem Span-Selektor wird es funktionieren.

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

Answer 3

Geht man von diesem CSS, Sie scheinen nicht CSS richtig zu verstehen, oder Sie verwenden sie nicht korrekt zumindest. Vielleicht möchten Sie den SitePoint-Artikel über the cascade, specificity and inheritance für eine gute Einführung lesen.

Der Grund, der nicht funktioniert, ist, weil die letzten zwei Zeilen dieses CSS für die Listenelemente mit der support Klasse gelten. Die vorletzte Zeile gilt für alle Listenelemente, und die letzte Zeile fügt dann die für die support Listenelemente hinzu. Also, da es keine left Eigenschaft in dieser letzten Zeile gibt, kaskadiert die left Eigenschaft von der vorherigen Zeile, so dass es zu.

Wenn Sie eine Klasse verwenden einen speziellen Fall zu markieren, sollten Sie nicht alle CSS des allgemeinen Fall wiederholen, aber die CSS nur, 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 Das bedeutet, dass die support -Klassenlistenelemente das gesamte CSS erhalten, das die anderen Listenelemente erhalten, jedoch mit der left-Eigenschaft auf die Standardeinstellung zurückgesetzt werden und stattdessen die right-Eigenschaft festgelegt wird.