Expanding vertical menu en CSS/javascript

Alors du coup j'ai creusé un peu mes méninges pour trouver une solution un peu brutale mais qui fonctionne dans ce type de problèmes...

J'ai créée 2 classes différentes applicables aux <li> du sous-menu :

Une classe ".spacer" avec un attribut height à 10px (hauteur de l'espacement désiré entre le menu et le sous-menu) ;
Une classe ".normal" avec les attributs normaux pour tout les autres ;

Ce qui donne :
CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
 
#menu_nav {
    padding:0px;
    margin:0px;
}
 
#menu_nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
 
#menu_nav ul li {
    padding-bottom:10px;
    height:auto;
    display:block;
    }
 
#menu_nav {
    width: 240px;
    margin: 10px;
    }
 
#menu_nav li a {
    text-decoration: none;
    font-size:14px;
    height:24px;
    padding-top:8px;
    padding-left:10px;
}    
 
#menu_nav li a:link, #menu_nav li a:visited {
    color: #4D4D4D;
    text-align:left;
    display: block;
    background:  url(../images/menu10.gif);
    }
 
#menu_nav li a:hover {
    color: #FF9834;
    padding-right:10px;
    text-align:right;
    background:  url(../images/menu10_hover.gif);
    font-weight:bold;
}
 
#menu_nav ul li ul li.normal {
    padding-bottom:10px;
    height:26px;
    display:block;
}
 
#menu_nav li ul li a {
    text-decoration: none;
    font-size:11px;
    height:18px;
    padding-top:8px;
    padding-left:10px;
    overflow:hidden;
}    
 
#menu_nav li ul li a:link, #menu_nav li ul li a:visited {
    color: #4D4D4D;
    text-align:left;
    display: block;
    background:  url(../images/submenu10.gif);
    }
 
#menu_nav li ul li a:hover {
    color:#990000 ;
    padding-right:10px;
    text-align:right;
    background:  url(../images/submenu10_hover.gif);
    font-weight:bold;
}
 
 
#menu_nav li a.current {
    padding-right:10px;
    text-align:right;
    background:  url(../images/menu10_hover.gif);
    font-weight:bold;
}
 
.submenu{
    display: block;
    height: 22px;
    margin-left: 46px;
    padding-left: 7px;
    overflow:hidden;
}
 
.hide{
    display: none;
}
 
.show{
    display: block;
}
 
li.spacer {
    height:10px;
    overflow:hidden;
}

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<div id="menu_nav">
    <ul>
        <li><a href="index.php?cat=reglementation&mode=preambule">Accueil</a></li>
        <li onmouseover="showHide('sous_menu1')" onmouseout="showHide('sous_menu1')"><a href="index.php?cat=reglementation&mode=transport" class="current">Le Transport de personnes</a>
            <ul id="sous_menu1" class="hide">
                <li class="spacer"></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=petite_remise" class="submenu">La Petite Remise</a></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=grande_remise" class="submenu">La Grande Remise</a></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=taxi" class="submenu">Le Taxi</a></li>
            </ul>
        </li>
        <li onmouseover="showHide('sous_menu3')" onmouseout="showHide('sous_menu3')"><a href="index.php?cat=reglementation&mode=textes">Les Textes de R&eacute;f&eacute;rence</a>
            <ul id="sous_menu3" class="hide">
                <li class="spacer"></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=fondamentaux" class="submenu">Textes Fondamentaux</a></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=organisation" class="submenu">Textes sur l'Organisation</a></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=exploitation" class="submenu">Textes sur l'Exploitation</a></li>
            </ul>
        </li>
        <li onmouseover="showHide('sous_menu2')" onmouseout="showHide('sous_menu2')"><a href="index.php?cat=reglementation&mode=tarifs">Les Tarifs du Taxi</a>
            <ul id="sous_menu2" class="hide">
                <li class="spacer"></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=regles_tarifs" class="submenu">R&egrave;gles de Tarification</a></li>
                <li class="normal"><a href="index.php?cat=reglementation&mode=recherche_tarifs" class="submenu">Recherche Tarifs</a></li>
            </ul>
        </li>
    </ul>
</div>

Je suis quand même ouvert à de nouvelles solutions "plus propre" si quelqu'un en a une ?
Merci !