menu w samym css jeszcze bardziej uniwersalne Opcje

[onlyX]

Witam!

Chciałem stworzyć prototyp wielopoziomowego menu, tak żeby bez zbędnej roboty móc je skopiować do nowych projektów. Problem z tym co już napisałem jest taki, że każdy z poziomów trzeba chować osobno, co daje po 2 reguły dla każdego poziomu.
Czy da się to tak napisać te reguły, aby działały dla nieskończenie wielu poziomów? Taki mały szczególik, ale chciałbym, żeby to było maksymalnie uniwersalne.

[HTML] pobierz, plaintext 
/* DROPDOWN MENU */
 
.dropdown-menu li{
    float: left;
    position: relative;
}
/* 2 level */
.dropdown-menu li ul{
    display: none;
    position: absolute;
    top: 30px; /* wysokosc 1 poziomu */
    left: 0px;
}
.dropdown-menu li ul li{
    float: none;
}
.dropdown-menu li ul li ul{
    left: 120px; /* szerokosc 2+*/
    top: 0;
}
/* pokazywanie i chowanie odpowiednich poziomów */
.dropdown-menu li:hover ul {
    display: block;
}
.dropdown-menu li:hover ul li ul{
    display: none;
}
.dropdown-menu li ul li:hover ul{
    display: block;
}
.dropdown-menu li ul li:hover ul li ul{
    display: none;
}
.dropdown-menu li ul li ul li:hover ul{
    display: block;
}
.dropdown-menu li ul li ul li:hover ul li ul{
    display: none;
}
/* DROPDOWN MENU - end*/
 
 
/* wygląd menu*/
#nav{
    width: 950px;
    height: 30px;
    margin: 0 auto;
    background: #ccc;
}
#nav ul li{
    line-height: 30px;
    height: 30px;
}
#nav ul ul{
    background: #bbb;
}
#nav ul ul ul{
    background: #aaa;
}
#nav ul ul ul ul{
    background: #999;
}
#nav ul li ul li{
    width: 120px;  
}
[HTML] pobierz, plaintext 

Ten post edytował onlyX 27.09.2010, 14:35:50

[devnul]

dla starych i bezużytecznych przeglądarek polecam http://code.google.com/p/ie7-js/ - bez nowych rozwiązań pozostaje Ci zabawa w ręczne zagnieżdżanie każdego poziomu (bo to co ja Ci wkleiłem pozwala na automatyczne wyświetlanie jednego po drugim bez konieczności definiowania osobnego elementu dla każdego poziomu)