Szukam kogoś kto umie CSS

Witajcie mam w swoim sklepie rozwijane menu. Chciałem je przerobić mianowicie mam tak: https://world4players.com/

(niestety muszę podać link byście zobaczyli jak aktualnie wygląda)

tzn. kreska po najechaniu na zakładkę "dyski" jest tak oddalona od tego wyrazu. Chciałbym by była bliżej ale również była schowana zanim najedzie się na nią. Wiecie co mam zmienić w tym? Poniżej wklejam fragment CSS który odpowiada za ten element.

#_desktop_top_menu ul.top-menu[data-depth="3"] {
    padding-top: 0;
}
ul.top-menu[data-depth="3"]>li {
    overflow: hidden;
}
.top-menu a[data-depth="3"] {
    position: relative;
    color: #000;
    margin-bottom: 10px;
    padding: 0 0 0 15px;
    margin-left: -5px;
    transition: all .3s;
}
.top-menu a[data-depth="3"]:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    display: inline-block;
    margin: auto;
    width: 10px;
    height: 1px;
    border-bottom: 1px solid #000; 
}
.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

ewentualnie bym chciał również by zamiast takiej kreski rozwijały się dalsze etapy tego menu w dół. Tzn po najechaniu na "Kategorie: wysuwa się pierwsza część potem po najechaniu na podzespoły do laptopów kolejne i po najechaniu na dyski ostatnie menu. Żeby nie było wszystko już rozwinięte. (oczywiście to tylko moje zastanowienie czy lepiej by to nie wyglądało i czy dużo przeróbek z tym). Jak za dużo roboty to już by mogły zostać te kreski ale żeby lepiej to wyglądało i odróżniało się od wyższego stopnia

.top-menu a[data-depth="3"]:before {

left: -5px;

}

tu musisz zmienić zobacz 0 czy tak jak chciales 

Można zrobić coś takiego:

.top-menu a[data-depth="3"]:hover:before {
    left: 0;
}

Godzinę temu, Skipi napisał:

.top-menu a[data-depth="3"]:before {

left: -5px;

}

tu musisz zmienić zobacz 0 czy tak jak chciales 

tak miałem na początku i kreski były cały czas a nie o to mi właśnie chodziło ? 

28 minut temu, cantoro napisał:

Można zrobić coś takiego:

.top-menu a[data-depth="3"]:hover:before {
    left: 0;
}

 

też jest fajne ale jeszcze wolałbym pokombinować jak zrobić taki efekt co opisałem

jak się nie uda to ten wtedy zostawię

@JimUSA Strona niestety nie działa.

17 godzin temu, Lisuter napisał:

@JimUSA Strona niestety nie działa.

już działa

Nie wiem czy o taki efekt chodziło  Jak chcesz mniejszy / większy odstęp, to dostosuj sobie zmieniając padding i 8px, które użyłem do przykładu.

Godzinę temu, lutzen napisał:

Nie wiem czy o taki efekt chodziło  Jak chcesz mniejszy / większy odstęp, to dostosuj sobie zmieniając padding i 8px, które użyłem do przykładu.

dobra a żeby teraz oddalić trochę te całe napisy? w sensie żeby  Dyski były bardziej w prawo niż Podzespoły do laptopów, tzn litera "D" od słowa dyski była pod literą "O" lub "D" słowa Podzespoły (nie wiem czy rozumiesz ale starałem się wyjaśnić o co mi chodzi  )

Nie bardzo mam teraz czas sprawdzać ale wydaje mi się, że przy rozwiązaniu lutzena wystarczy zmodyfikować margines ze stylu poniżej. Nie bardzo też rozumiem co było nie tak z moim rozwiązaniem. Swoją drogą myślałem, że to ja skupiam się za bardzo na szczegółach ;)

.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

2 godziny temu, cantoro napisał:

Nie bardzo mam teraz czas sprawdzać ale wydaje mi się, że przy rozwiązaniu lutzena wystarczy zmodyfikować margines ze stylu poniżej. Nie bardzo też rozumiem co było nie tak z moim rozwiązaniem. Swoją drogą myślałem, że to ja skupiam się za bardzo na szczegółach

.top-menu a[data-depth="3"]:hover {
    margin-left: 10px;
}

U ciebie nie bylo wlasnie wysuwania tej kreski tylko ona sie pojawiala ? i napis wtedy tez sie nie przesuwal w tym momencie

Mam jeszcze jedno pytanie co do tego menu, to w czym trzeba zmienić i co, by moje menu po rozwinięciu pokazywało jakąś część a resztę dopiero po naciśnięciu np. Rozwiń dalej? Bo teraz mam tego całą masę bez sensu. Lepiej by było na połowę ekranu a później ten kto chce to sobie rozwinie liste dalej.