Zakładka od lewej krawędzi

Question

Witam,

Mam taki problem, że totalnie nie mam pojęcia jak przesunąć zakładkę żeby zaczynała się od lewej krawędzi a nie od napisu.

http://meffy2.cba.pl/# Tutaj strona na której można to zobaczyć jak to wygląda.

Chciałbym żeby przesuwając myszką na zakładke Games, ona się rozsuwała od lewej krawedzi a nie tak jak juz pisałem od napisu.

Answer 1

Elementy masz źle poukładane w menu (przynajmniej moim zdaniem). Znacznik <li> zaczyna Ci się w tym miejscu i dlatego również dropdown menu pojawia się w ten sposób.

Jeżeli chcesz zachować obecną strukturę, to ewentualnie możesz zmienić właściwość "left" na ujemną (z tego co zauważyłem na -20px).

Comments

A w jaki sposób według ciebie powinny być ułożone elementy li, żeby było porpawnie?

Z tym -20px to działa, dzięki :). I czy stosowanie - wartości jest poprawne?

---

Po pierwsze to w elemencie <li> z dropdownem masz pusty link (bez żadnego contentu), a później robisz kolejny link już prawidłowy z napisem "Games". Po co dwa linki?

Druga sprawa, to robisz paddingi pomiędzy <li> przez co też powstają przerwy i przesunięcie linków. Ja bym to zrobił w nieco inny sposób (dać na linki margines po prostu, zamiast tego paddinga przy <li>).

Trzecia sprawa przerwy mogą (i tak prawdopodobnie jest) są nieco większe niż deklarujesz przez zastosowanie inline-block na elementach <li>.

Czwarta sprawa (to już pewnie kwestia indywidualna), nie robiłbym tych kresek pionowych borderem, a po prostu pseudoelementami :after, :before.

 

Tak na szybko, to u mnie by było coś takiego:
https://codepen.io/arces92/pen/xaQGmE

 

P.S.
Nie spotkałem się z tym, żeby ujemne wartości były czymś niepoprawnym. Po prostu przy responsywności strony wtedy trzeba zwracać na to większą uwagę, żeby czasami to nie rozjechało strony.

---

Spoko, spoko dzięki za te wszystkie podpowiedzi, jestem dopiero początkującym więc ucze sie na swoich błedach, i nastepnym razem zastosuję inne rzeczy i zmiennie trochę :)

---

Wiadomo, każdy kiedyś zaczynał. Powodzenia :)

Answer 2

Pudding i margin ustawiaj na elementach <a> a nie na <li>