li hover strzałka po najechaniu Opcje

[john_doe]

mam taki zaczątek menu

jsfiddle

chciałbym aby po najechaniu do dołu pozycji przyklejona była strzałka w dół wyśrodkowana na długości.
jak to osiągnąć tylko w css?

[trueblue]

Wstawiłbym tam pozycjonowany absolutnie dodatkowy znacznik i użył tego: http://css-tricks.com/snippets/css/css-triangle/

[john_doe]

zrobiłem coś takiego
jsfiddle

jak wyśrodkować ten arrow?
left: 50% nie zdaje egzaminu...

Ten post edytował john_doe 18.05.2014, 10:31:16

[trueblue]

margin-left: -połowa szerokości strzałki px;

[john_doe]

dokładnie tak i należy jeszcze dodać left: 50%

działający przykład dla potomnych
jsfiddlenet

i dodatkowe pytanko
chciałbym teraz dodać klasę coś w stylu "active" i gdy przypiszę ją do danej pozycji będzie ona zielona i ze strzałką. Jak to osiągnąć z tym kodem?



Ten post edytował john_doe 18.05.2014, 11:24:13

[trueblue]

Tak, left ma zostać, a szerokość strzałki jak już zauważyłeś ma 39/40px.

[HTML] pobierz, plaintext 
nav#top-nav ul li:hover,
nav#top-nav ul li.active{ 
 
nav li:hover a:after,
nav li.active a:after{
[HTML] pobierz, plaintext 

Ten post edytował trueblue 18.05.2014, 11:31:36

[john_doe]

tak zrobiłem i działa jednak muszę przypisać klase active do <li> i do <a>

musiałbym zrobić tak aby link rozciągał się na całą szerokość <li> i wtedy active tylko do <a>
myslałem, że display: block to załatwi ale to rozciągnęło link vertykalnie na maxa

fiddle

Ten post edytował john_doe 18.05.2014, 11:35:35

[trueblue]

Nie do końca rozumiem w czym tkwi problem.

http://jsfiddle.net/8Mc24/