Trzypoziomowe menu - problem

[rejcz]

[Kartofelek]

Pytanie jest co właściwie chcesz osiągnąć, bo mi się wydaje że tam nie potrzeba JS.

[rejcz]

Może jakaś podpowiedź? Menu miałoby wyglądać tak:



Po najechaniu na "Pozycja 1" rozwija się niebieskie pole o całej szerokości menu i widoczny "Poziom 2". Po najechaniu na "Poziom 2a" pojawia się "Poziom 3" i jeżeli jest dłuższy niż "Poziom 2" to niebieskie pole zwiększa swoją wysokość (dlatego nie chciałem stosować position:absolute dla trzeciego levelu). Dodatkowo jest jeszcze obrazek który zmienia się przy hover na poziomie drugim.

[Kartofelek]

Możesz cały poziom 2 i 3 wstawić w div (np. .submenu)który będzie pokazywany na hover.
Dla 2 i 3 to już zwykły float z position:relative.

Logika działania:

Kod:

/* glowne */
.nav > ul {background:#fff; padding:.....;}
.nav > ul > li { bla bla bla pomaranczowe}
.nav > ul > li > a {display:block; width:100%; height:100%; pomarancowo bla bla bla }
/* podmenu */
.nav > ul > li > .submenu {visibility:hidden; opacity:0; transition:0.5s; position:absolute; top:.....; left:0; width:100%; background:niebiesko}
.nav > ul > li:hover > .submenu {visibility:visible; opacity:1}
/* levelki */
.nav .menu2level {float:left; width..... lorem ipsum}
.nav .menu2level li {....}
.nav .menu2level a {....}
.nav .menu3level {float:left; width..... lorem ipsum}
.nav .menu3level li {....}
.nav .menu3level a {....}
.nav .superHiperTajemniczyObrazek {float:right; margin:lorem ipsum}