Problème de style sur un menu avec des listes imbriquées

tarentaise · 01/08/2011, 12h11

Bonjour,

je doit adapter une feuille de style appartenant à une charte graphique pour l'utiliser sur un site que je gère et je me heurte à un souci de style sur un menu.

Le menu est constitué de listes imbriquées qui permettent de visualiser l'arborescence d'une rubrique racine. Pour le premier et le deuxième niveau pas de souci mais lorsque je descends au troisième niveau j'ai une flèche qui se positionne et que je ne souhaite pas voir. J'ai essayé plusieurs modifications du fichier .css mais je n'arrive pas à la supprimer ni à supprimer le saut de ligne qu'elle engendre.

Je vous met ci-dessous un lien vers une page test car c'est pour un intranet, ainsi que le code html de la page et le code css.

page test

Code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
105
106
<!-- debut colonne menu rubrique -->
<div id="ColMenu">
 
    <!-- debut affichage menu rubrique -->    
    <div class="menuCont">
 
        <!-- debut affichage titre rubrique racine -->
        <div class="titreRubrique">
        Rubrique Racine
        </div>
        <!-- fin affichage titre rubrique racine -->
 
            <!-- debut affichage sous-rubrique -->
            <div class="inner">
 
                <ul >
                    <li>
                    	<a href="spip.php?rubrique2">Rubrique 1</a>
                    </li>                
                    <li>
                        <ul>
                            <li>
                            	<a href="spip.php?rubrique3">Rubrique 1.1</a>
                            </li>                
                            <li>
                            	<a href="spip.php?rubrique4">Rubrique 1.2</a>
                            </li>                
                            <li>
                            	<a href="spip.php?rubrique5">Rubrique 1.3</a>
                            </li>                
                        </ul>
                    </li>
                    <li>
                    	<strong><a href="spip.php?rubrique6">Rubrique 2</a></strong>
                    </li>                
                    <li>
                        <ul>
                            <li>
                                <a href="spip.php?rubrique7">Rubrique 2.1</a>
                            </li>                
                            <li> supprimer cette flèche
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique8">Rubrique 2.1.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique9">Rubrique 2.2</a>
                            </li>                
                            <li>supprimer cette flèche
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique10">Rubrique 2.2.1</a>
                                    </li>                
                                    <li>
                                        <a href="spip.php?rubrique11">Rubrique 2.2.2</a>
                                    </li>                
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<a href="spip.php?rubrique12">Rubrique 3</a>
                    </li>                
                    <li>
                        <ul>
                            <li>
                                <a href="spip.php?rubrique13">Rubrique 3.1</a>
                            </li>                
                            <li>
                                <a href="spip.php?rubrique14">Rubrique 3.2</a>
                            </li>                
                            <li>supprimer cette flèche
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique15">Rubrique 3.2.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique16">Rubrique 3.3</a>
                            </li>                
                            <li>supprimer cette flèche
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique17">Rubrique 3.3.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique18">Rubrique 3.4</a>
                            </li>                
                        </ul>
                    </li>
                </ul>
            <div id="FondMenuSecondaire"> </div>
            </div>
 
        <!--  fin affichage sous-rubrique -->
        </div>
 
    <!-- fin affichage menu rubrique -->
    </div>
 
<!-- fin colonne menu rubrique -->

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#ColMenu {float:left;margin:0;padding:0;text-align:left;}
#ColMenu .menuCont {padding:0 20px 16px 0;background:url(bg_menuCont.gif) transparent no-repeat 0 100%;margin:0 0 1.5em 0;}
#ColMenu .menuCont .titreRubrique {font-size:1.4em;font-weight:bold;color:#FFF;padding:11px 0 5px 10px;}
#ColMenu .menuCont .inner {margin:0;padding:25px 0 0 0;list-style:none;background-repeat:no-repeat;background-position:0 0;}
#ColMenu .menuCont .inner ul {margin:0;padding:0 0 20px 0;background-repeat:no-repeat;background-position:0 100%;list-style:none;}
#ColMenu .menuCont .inner ul li {background-image:url(bg_menugauche_li.png);background-color:transparent;background-repeat:no-repeat;background-position:0 0;}
#ColMenu .menuCont .inner ul li.firstChild {background-image:none;}
#ColMenu .menuCont .inner ul li a {color:#FFF;text-decoration:none;display:block;padding:.25em 0 2px 11px;}
#ColMenu .menuCont .inner ul li a:hover,
#ColMenu .menuCont .inner ul li a:active,
#ColMenu .menuCont .inner ul li a:focus {text-decoration:underline;}
#ColMenu .menuCont .inner ul li strong {border-left:3px solid #FFF;display:block;}
#ColMenu .menuCont .inner ul li strong a {padding:2px 0 2px 8px;}
#ColMenu .menuCont .inner ul ul {margin:0 0 0 21px;padding:.3em 0 .7em 0;list-style:none;font-size:.9em;}
#ColMenu .menuCont .inner ul ul li {background:url(bullet_7.gif) transparent no-repeat 0 .3em !important;margin:0 0 .1em 0;}
#ColMenu .menuCont .inner ul ul li a {padding:0 0 0 14px;}
#ColMenu .menuCont .inner ul ul li a:hover,
#ColMenu .menuCont .inner ul ul li a:active,
#ColMenu .menuCont .inner ul ul li a:focus {}
#ColMenu .menuCont .inner ul ul li strong {border:none;font-weight:bold;}
#ColMenu .menuCont .inner ul ul li strong a {padding:2px 0 2px 8px;}

D'avance merci à ceux qui voudront bien m'accorder un peu de leur temps

12monkeys · 04/08/2011, 13h23

Bonjour

D'abord pour être bien sur de ce qui ne vas pas : c'est bien le menu à droite qu'il faut corriger pour ressembler à celui de gauche ?

En fait ton problème viens de la construction de tes listes : il ne faut pas créer de nouveau li pour insérer la liste des enfants, mais l'insérer dans le premier li parent.

Toi tu fais :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li>
  niveau 1
  </li>
  <li>
    <ul>
      <li>
      niveau 2
      </li>
    <ul>
  </li>
</ul>

Mais il faut faire ainsi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<ul>
  <li>
  niveau 1
    <ul>
      <li>
      niveau 2
      </li>
    <ul>
  </li>
</ul>

Voilà ce que ça donne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<ul>
                    <li>
                    	<a href="spip.php?rubrique2">Rubrique 1</a>
                        <ul>
                            <li>
                            	<a href="spip.php?rubrique3">Rubrique 1.1</a>
                            </li>                
                            <li>
                            	<a href="spip.php?rubrique4">Rubrique 1.2</a>
                            </li>                
                            <li>
                            	<a href="spip.php?rubrique5">Rubrique 1.3</a>
                            </li>                
                        </ul>
                    </li>
                    <li>
                    	<strong><a href="spip.php?rubrique6">Rubrique 2</a></strong>
                        <ul>
                            <li>
                                <a href="spip.php?rubrique7">Rubrique 2.1</a>
                                 <ul>
                                    <li>
                                        <a href="spip.php?rubrique8">Rubrique 2.1.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique9">Rubrique 2.2</a>
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique10">Rubrique 2.2.1</a>
                                    </li>                
                                    <li>
                                        <a href="spip.php?rubrique11">Rubrique 2.2.2</a>
                                    </li>                
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<a href="spip.php?rubrique12">Rubrique 3</a>
                        <ul>
                            <li>
                                <a href="spip.php?rubrique13">Rubrique 3.1</a>
                            </li>                
                            <li>
                                <a href="spip.php?rubrique14">Rubrique 3.2</a>
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique15">Rubrique 3.2.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique16">Rubrique 3.3</a>
                                <ul>
                                    <li>
                                        <a href="spip.php?rubrique17">Rubrique 3.3.1</a>
                                    </li>                
                                </ul>
                            </li>
                            <li>
                                <a href="spip.php?rubrique18">Rubrique 3.4</a>
                            </li>                
                        </ul>
                    </li>
                </ul>

http://j-willette.developpez.com/tut...page_2#LII-G-2

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email