cambia la posizione assoluta da sinistra a destra su un tag span a seconda della classe

Question

Questa è la mia prima domanda qui, ma sono sicuro che ce ne saranno molte altre in arrivo. Ho un piccolo problema di posizione che vorrei sapere se è anche possibile raggiungere.

Ho una lista non ordinata (<ul>) con float <li> s, per le opzioni principali i float a sinistra, e per le opzioni di contatto e di supporto li faccio scorrere a destra, finora tutto bene. Ora ho uno <span> all'interno di ogni <li> che visualizzo sotto l'elenco orizzontale, l'elenco è per un menu. Questi <span> funzionano come descrizione per la scelta del menu e per le opzioni normali io uso position:absolute; top:30px; left:0; questo funziona come sospetto. Ora vorrei cambiare gli attributi di posizione per quelle voci di menu che sono a destra, in modo che la durata sia position:absolute; top:30px; right:0; e questo non funziona affatto. Sembra che sia impossibile cambiare questo con una regola css più specifica dell'altra, eppure il float funziona alla grande.

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> 

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

L'ultima riga nel css fanno nessuna differenza! Se qualcuno ha una risposta o un lavoro in giro apprezzo molto l'aiuto.

Domanda risposta e problema risolto. Controlla James Arons o i post di mercator.

Answer 1

Anche se hai impostato right:0, il tuo left:0 viene ancora ereditato. È necessario impostare left:auto per sovrascrivere quello stile per la classe support.

Answer 2

Hmm strano. Non posso dirti perché il tuo codice non funziona, dovrebbe funzionare dal momento che il supporto: hover span è un selettore più specifico.

Trovato una correzione però: Posizione elementi assoluti rimasta: 0; per impostazione predefinita. Se rimuovi a sinistra: 0; dal selettore di span funzionerà.

Il codice sarà simile a questa:

#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 giudicare da quel CSS, non sembra di comprendere correttamente i CSS, o non lo si utilizza in modo corretto, almeno. Potresti voler leggere l'articolo di SitePoint su the cascade, specificity and inheritance per una buona introduzione.

La ragione che non funziona è perché gli ultimi due linee di CSS che si applicano alle voci di elenco con la classe support. La penultima riga si applica a a tutti gli elementi dell'elenco e l'ultima riga viene aggiunta a quella per gli elementi dell'elenco support. Pertanto, poiché non esiste la proprietà left nell'ultima riga, la proprietà left scende a cascata dalla riga precedente, rendendola left: 0.

Quando si utilizza una classe per segnare un caso particolare, non si dovrebbe essere ripetendo tutto il CSS del caso generale, ma solo fornire il CSS necessario per cambiarlo:

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

che i CSS significa che gli elementi dell'elenco support -class ottengono tutto il CSS ottenuto dagli altri elementi dell'elenco, ma con la proprietà left ripristinata sui valori predefiniti e invece il set di proprietà right.