zmienić bezwzględną pozycję od lewej do prawej na znaczniku zakresu w zależności od klasy

Question

To jest moje pierwsze pytanie tutaj, ale jestem pewien, że będzie jeszcze wiele innych. Mam mały problem z pozycją, który chciałbym wiedzieć, czy można go osiągnąć.

Mam nieuporządkowaną listę (<ul>) z pływającymi <li> s, dla głównych opcji pływających po lewej stronie, a dla opcji kontaktu i wsparcia unoszę je poprawnie, na razie tak dobrze. Teraz mam <span> wewnątrz każdego <li> który wyświetlam pod listą poziomą, lista jest dla menu. Te <span> s działa jako opis do wyboru z menu i dla normalnych opcji, których używam, jest to podejrzane. Teraz chciałbym zmienić atrybuty pozycji dla tych pozycji menu, które unoszą się w prawo, aby rozpiętość została uzyskana position:absolute; top:30px; right:0;, a to w ogóle nie działa. Wygląda na to, że nie można tego zmienić za pomocą bardziej konkretnej reguły css niż drugiej, ale funkcja ta działa doskonale.

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> 

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} 

Ostatni wiersz w css nie zmieni! Jeśli ktoś ma odpowiedź lub pracę, bardzo doceniam pomoc.

Pytanie odpowiedziało i problem rozwiązany. Sprawdź posty Jamesa Arona lub mercatora.

Answer 1

Nawet jeśli ustawiłeś right:0, twoja left:0 nadal jest dziedziczona. Aby przesłonić ten styl dla klasy support, musisz ustawić left:auto.

Answer 2

Hmm dziwne. Nie mogę powiedzieć, dlaczego Twój kod nie działa, powinien działać, ponieważ wsparcie: zakres hover jest bardziej szczegółowym selektorem.

Znaleziono poprawkę: Po lewej pozostały elementy pozycji: 0; domyślnie. Po usunięciu w lewo: 0; z selektora zakresu będzie działać.

Twój kod będzie wyglądać następująco:

#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

Sądząc po tym CSS, nie wydaje się zrozumieć CSS poprawnie, czy nie jest on używany prawidłowo przynajmniej. Możesz przeczytać artykuł SitePoint o the cascade, specificity and inheritance dla dobrego wprowadzenia.

Powód, dla którego nie działa, ponieważ ostatnie dwie linie tego CSS odnoszą się do elementów listy z klasą support. Linia od drugiej do ostatniej odnosi się do pozycji listy wszystkich, a ostatnia linia dodaje do tej listy elementy listy support. Tak więc, ponieważ w ostatnim wierszu nie ma właściwości, właściwość left spada kaskadowo z poprzedniej linii, co powoduje, że jest ona również zbytnia.

Kiedy używasz klasę oznaczyć szczególny przypadek, nie należy powtarzać cały CSS o ogólnym przypadku, ale tylko dostarcza CSS potrzeby jej zmieniać:

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

To CSS będzie oznaczać, że pozycje na liście klas mają wszystkie elementy CSS, które uzyskają inne elementy listy, ale z ustawieniem właściwości domyślnej na left i ustawieniem właściwości right.