Bonjour,
je vous expose mon problème: j’ai coder un menu déroulant sur une page html, donc le code html du menu et le css sont tous les deux sur cette page, tout fonctionne nickel.
A présent je souhaiterais créé un autre menu déroulant, seulement le soucis c’est que celui ci prends forcément les attributs du premier, malheureusement le texte est plus conséquent dans ce menu que dans le premier et tout ne rentre pas.
Donc je suis ici pour vous demandez si vous auriez une solution pour que les différents menus est leur propre css et donc ainsi je pourrais changer la taille du menu concerné sans que ça change celles des 2.
Voici mes codes, tout d’abord le HTML du premier menu:
<div id="menu" style=padding-left:75px>
<ul class="niveau1">
<li class="sousmenu , plop"><a href="menu 1">Sélectionnez un épisode<br>entre 01 et 100</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 1.1">Épisodes 01 à 10</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.1.1">Épisode 01</a></li>
<li><a href="Sous sous menu 1.1.2">Épisode 02</a></li>
<li><a href="Sous sous menu 1.1.3">Épisode 03</a></li>
<li><a href="Sous sous menu 1.1.4">Épisode 04</a></li>
<li><a href="Sous sous menu 1.1.5">Épisode 05</a></li>
<li><a href="Sous sous menu 1.1.6">Épisode 06</a></li>
<li><a href="Sous sous menu 1.1.7">Épisode 07</a></li>
<li><a href="Sous sous menu 1.1.8">Épisode 08</a></li>
<li><a href="Sous sous menu 1.1.9">Épisode 09</a></li>
<li><a href="Sous sous menu 1.1.10">Épisode 10</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.2">Épisodes 11 à 20</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.2.1">Épisode 11</a></li>
<li><a href="Sous sous menu 1.2.2">Épisode 12</a></li>
<li><a href="Sous sous menu 1.2.3">Épisode 13</a></li>
<li><a href="Sous sous menu 1.2.4">Épisode 14</a></li>
<li><a href="Sous sous menu 1.2.5">Épisode 15</a></li>
<li><a href="Sous sous menu 1.2.6">Épisode 16</a></li>
<li><a href="Sous sous menu 1.2.7">Épisode 17</a></li>
<li><a href="Sous sous menu 1.2.8">Épisode 18</a></li>
<li><a href="Sous sous menu 1.2.9">Épisode 19</a></li>
<li><a href="Sous sous menu 1.2.10">Épisode 20</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.3">Épisodes 21 à 30</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.3.1">Épisode 21</a></li>
<li><a href="Sous sous menu 1.3.2">Épisode 22</a></li>
<li><a href="Sous sous menu 1.3.3">Épisode 23</a></li>
<li><a href="Sous sous menu 1.3.4">Épisode 24</a></li>
<li><a href="Sous sous menu 1.3.5">Épisode 25</a></li>
<li><a href="Sous sous menu 1.3.6">Épisode 26</a></li>
<li><a href="Sous sous menu 1.3.7">Épisode 27</a></li>
<li><a href="Sous sous menu 1.3.8">Épisode 28</a></li>
<li><a href="Sous sous menu 1.3.9">Épisode 29</a></li>
<li><a href="Sous sous menu 1.3.10">Épisode 30</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.4">Épisodes 31 à 40</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.4.1">Épisode 31</a></li>
<li><a href="Sous sous menu 1.4.2">Épisode 32</a></li>
<li><a href="Sous sous menu 1.4.3">Épisode 33</a></li>
<li><a href="Sous sous menu 1.4.4">Épisode 34</a></li>
<li><a href="Sous sous menu 1.4.5">Épisode 35</a></li>
<li><a href="Sous sous menu 1.4.6">Épisode 36</a></li>
<li><a href="Sous sous menu 1.4.7">Épisode 37</a></li>
<li><a href="Sous sous menu 1.4.8">Épisode 38</a></li>
<li><a href="Sous sous menu 1.4.9">Épisode 39</a></li>
<li><a href="Sous sous menu 1.4.10">Épisode 40</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.5">Épisodes 41 à 50</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.5.1">Épisode 41</a></li>
<li><a href="Sous sous menu 1.5.2">Épisode 42</a></li>
<li><a href="Sous sous menu 1.5.3">Épisode 43</a></li>
<li><a href="Sous sous menu 1.5.4">Épisode 44</a></li>
<li><a href="Sous sous menu 1.5.5">Épisode 45</a></li>
<li><a href="Sous sous menu 1.5.6">Épisode 46</a></li>
<li><a href="Sous sous menu 1.5.7">Épisode 47</a></li>
<li><a href="Sous sous menu 1.5.8">Épisode 48</a></li>
<li><a href="Sous sous menu 1.5.9">Épisode 49</a></li>
<li><a href="Sous sous menu 1.5.10">Épisode 50</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.6">Épisodes 51 à 60</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.6.1">Épisode 51</a></li>
<li><a href="Sous sous menu 1.6.2">Épisode 52</a></li>
<li><a href="Sous sous menu 1.6.3">Épisode 53</a></li>
<li><a href="Sous sous menu 1.6.4">Épisode 54</a></li>
<li><a href="Sous sous menu 1.6.5">Épisode 55</a></li>
<li><a href="Sous sous menu 1.6.6">Épisode 56</a></li>
<li><a href="Sous sous menu 1.6.7">Épisode 57</a></li>
<li><a href="Sous sous menu 1.6.8">Épisode 58</a></li>
<li><a href="Sous sous menu 1.6.9">Épisode 59</a></li>
<li><a href="Sous sous menu 1.6.10">Épisode 60</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.7">Épisodes 61 à 70</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.7.1">Épisode 61</a></li>
<li><a href="Sous sous menu 1.7.2">Épisode 62</a></li>
<li><a href="Sous sous menu 1.7.3">Épisode 63</a></li>
<li><a href="Sous sous menu 1.7.4">Épisode 64</a></li>
<li><a href="Sous sous menu 1.7.5">Épisode 65</a></li>
<li><a href="Sous sous menu 1.7.6">Épisode 66</a></li>
<li><a href="Sous sous menu 1.7.7">Épisode 67</a></li>
<li><a href="Sous sous menu 1.7.8">Épisode 68</a></li>
<li><a href="Sous sous menu 1.7.9">Épisode 69</a></li>
<li><a href="Sous sous menu 1.7.10">Épisode 70</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.8">Épisodes 71 à 80</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.8.1">Épisode 71</a></li>
<li><a href="Sous sous menu 1.8.2">Épisode 72</a></li>
<li><a href="Sous sous menu 1.8.3">Épisode 73</a></li>
<li><a href="Sous sous menu 1.8.4">Épisode 74</a></li>
<li><a href="Sous sous menu 1.8.5">Épisode 75</a></li>
<li><a href="Sous sous menu 1.8.6">Épisode 76</a></li>
<li><a href="Sous sous menu 1.8.7">Épisode 77</a></li>
<li><a href="Sous sous menu 1.8.8">Épisode 78</a></li>
<li><a href="Sous sous menu 1.8.9">Épisode 79</a></li>
<li><a href="Sous sous menu 1.8.10">Épisode 80</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.9">Épisodes 81 à 90</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.9.1">Épisode 81</a></li>
<li><a href="Sous sous menu 1.9.2">Épisode 82</a></li>
<li><a href="Sous sous menu 1.9.3">Épisode 83</a></li>
<li><a href="Sous sous menu 1.9.4">Épisode 84</a></li>
<li><a href="Sous sous menu 1.9.5">Épisode 85</a></li>
<li><a href="Sous sous menu 1.9.6">Épisode 86</a></li>
<li><a href="Sous sous menu 1.9.7">Épisode 87</a></li>
<li><a href="Sous sous menu 1.9.8">Épisode 88</a></li>
<li><a href="Sous sous menu 1.9.9">Épisode 89</a></li>
<li><a href="Sous sous menu 1.9.10">Épisode 90</a></li>
</ul>
</li>
<li class="sousmenu"><a href="Sous menu 1.10">Épisodes 91 à 100</a>
<ul class="niveau3">
<li><a href="Sous sous menu 1.10.1">Épisode 91</a></li>
<li><a href="Sous sous menu 1.10.2">Épisode 92</a></li>
<li><a href="Sous sous menu 1.10.3">Épisode 93</a></li>
<li><a href="Sous sous menu 1.10.4">Épisode 94</a></li>
<li><a href="Sous sous menu 1.10.5">Épisode 95</a></li>
<li><a href="Sous sous menu 1.10.6">Épisode 96</a></li>
<li><a href="Sous sous menu 1.10.7">Épisode 97</a></li>
<li><a href="Sous sous menu 1.10.8">Épisode 98</a></li>
<li><a href="Sous sous menu 1.10.9">Épisode 99</a></li>
<li><a href="Sous sous menu 1.10.10">Épisode 100</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Le code html du second menu:
<div id="menu" style=padding-left:75px>
<ul class="niveau1">
<li class="sousmenu , plop"><a href="menu 2">Sélectionnez un arc</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 2.1">Shinigami Remplaçant</a></li>
<li class="sousmenu"><a href="Sous menu 2.2">Soul Society</a></li>
<li class="sousmenu"><a href="Sous menu 2.3">Arrancars</a></li>
<li class="sousmenu"><a href="Sous menu 2.4">Hueco Mundo</a></li>
<li class="sousmenu"><a href="Sous menu 2.5">Turn Back the Pendulum</a></li>
<li class="sousmenu"><a href="Sous menu 2.6">La Bataille de Karakura</a></li>
<li class="sousmenu"><a href="Sous menu 2.7">Hors Série</a></li>
<li class="sousmenu"><a href="Sous menu 2.8">Hors Série - Bounts</a></li>
<li class="sousmenu"><a href="Sous menu 2.9">Hors Série - Amagai Shûsuke</a></li>
<li class="sousmenu"><a href="Sous menu 2.10">Hors Série - Karaku-Rizer</a></li>
<li class="sousmenu"><a href="Sous menu 2.11">Hors Série - Rebellion des Zanpakut?</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Et le CSS:
/* CSS */
/* fond pour le menu */
div#menu a {color:#000000}
div#menu ul {padding: 0; border:1px solid; margin:0px; background: white}
/* Petite fleche pour les sous menu */
div#menu li.sousmenu {background: url(http://illiweb.com/fa/m/arrows_right3.gif) 95% 50% no-repeat;}
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 200px; display:none}
/* Bordure a gauche et des padding */
div#menu li a {text-decoration: none; padding: 4px 0 4px 8px; display:block; border-left: 8px solid #BBB; width:184px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
/* Bordure couleur de survol*/
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
/* la bordure de chaque hauteur a une couleure de survol*/
div#menu li a:hover {border-left-color: red;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
/*TAILLE PREMIERE COLONNE*/
div#menu {float: left; width: 15em;}
div#menu ul {margin: 0; padding: 0; width: 15em; background: white; border: 1px solid;}
div#menu ul ul {left: 15em; display:none}
div#menu li a {display: block; padding: 0.25em 0 0.25em 0.5em; text-decoration: none; width: 15em; border-left: 0.5em solid #BBB;}
/*TAILLE DEUXIEME COLONE*/
div#menu ul.niveau2 ul {left: 12em;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {width:12em; display:block}
div#menu ul.niveau2 li a {width: 12em;}
/*TAILLE TROISIEME COLONNE*/
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width:8em; display:block;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}
Voila, j’espère que quelqu’un pourra m’aider, parce que je ne trouve rien sur le net 
