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

Dla specjalistów Webmastering
#1

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

#2

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

 

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

#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.

#4

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

#5

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

#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;}
#7

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

#8
#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

#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.