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 CSS :
D'avance merci à ceux qui voudront bien m'accorder un peu de leur temps
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 :
<!-- 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 :
#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