[CSS][HTML] Nawigacja - Menu. Problem z submenu


(Tdu) #1

Mam taki problem i nie wiem jak sobie z nim poradzić.


(jacko1998) #2

http://jsbin.com/xiza/2/

 

z elementu .menu > li i .submenu usuń width


(Tdu) #3

To może doprecyzuje że chciałbym dopasować menu do szerokości ekranu. Dlatego używam procentów dla wymiarów i wielkości czcionki.


(jacko1998) #4

To wytnij to width: 100% z .submenu i wklej do .submenu > li


(Tdu) #5

Ok. O to mi właśnie chodziło. Dzięki :slight_smile:


(manieKMP) #6

Masz tylko jedno menu więc powyższe nie zadziała.

A całość zaokrągleń, o które Tobie chodzi to:

.menu {border-radius: 10px 10px 0 0;}
.menu li:first-child a:hover {border-radius: 10px 0 0 0;}
.menu li:last-child a:hover {border-radius: 0 10px 0 0;}

(Tdu) #7

Dzięki za propozycję jednak ten ostatni przykład nie działa do końca tak jak być powinno.


(Dimatheus) #8

(manieKMP) #9

A, ok, już wiem co nie trybiło :wink:

.menu {border-radius: 10px 10px 0 0;}
.menu li:first-child a:not(.child) {border-radius: 10px 0 0 0;}
.menu li:last-child a:not(.child) {border-radius: 0 10px 0 0;}

wynik


(Tdu) #10

Po prostu super manieKMP. O to właśnie mi chodziło. Świetna robota i masz u mnie połówkę :stuck_out_tongue:

Po co używać JS skoro jak widać CSS ma ogromne możliwości? Wiem…tutaj pojawia się problem interpretacji CSS przez przeglądarki ale co tam.

 

Teraz wystarczy nieco usprawnić zaokrąglanie aby zwiększyć kompatybilność i gotowe. Z tym już sobię poradzę.

Dzięki.