28172 sujets

CSS et mise en forme, CSS3

Placer une petite fleche sur un menu css

Bonjour,

Je cherche à mettre sur le menu 3 et 4 une petite flèche (img) pointant vers le bas, pour signaler un sous menu.
Aussi je n'arrive pas à aligner "menu" et le chiffre qui suit 1, 2, 3... Sitôt que je mets un espace ils se placent en colonnes. J'ai tenté avec un "inline" à divers endroit mais rien ne change ou alors en vrac.

Merci Smiley cligne
F.

CSS :

.MenuHaut{
    background-image: url(../images/fond_contenu.png);
    position:absolute;
    width:auto;
    margin:2px 0 0 10px;
	padding:0;
    border:1px solid #ccc;
}
.MenuHaut ul {
	float: left;
    font-size: 15px;
	width: 100%;
	list-style: none;
	color:#DAA520;
	padding:0;
	margin:0;
}

.MenuHaut a, .MenuHaut a:visited {
	display: block;
	color: #DAA520;
	text-decoration: none;
	padding:5px; /*espace du menu*/
}
.MenuHaut ul ul a{
	width:100%;
	height:100%;
}
.MenuHaut ul a{
	width:1%;
}

.MenuHaut li  {
	float: left;
	margin:0;
	padding:0;
}

.MenuHaut ul li {
    float:left;
    position:relative;
}

/*Sous Menus*/

.MenuHaut li ul {
    background-image: url(../images/fond_space.jpg);
    border:1px solid #ccc;
	position: absolute;
	left: -999em;
	height: auto;
	width:auto;
	margin: 0;
}

.MenuHaut li li {
	width:150px; /*Largeur sous menu*/
}

.MenuHaut li li a{
	width:150px;
}

.MenuHaut li ul  {
	margin: 0;
}

.MenuHaut li ul ul {
	margin: -2.8em 0 0 13.5em;
}

.ul_ch,
.MenuHaut li:hover ul ul,
.MenuHaut li li:hover ul ul,
.MenuHaut li li li:hover ul ul,
.MenuHaut li li li li:hover ul ul,
.MenuHaut li li li li li:hover ul ul
{
	left: -999em;
}


.MenuHaut li:hover ul,
.MenuHaut li li:hover ul,
.MenuHaut li li li:hover ul,
.MenuHaut li li li li:hover ul,
.MenuHaut li li li li li:hover ul
{
	left: auto;
}


.MenuHaut li:hover>ul.ul_ch{
	left: auto;
}



.MenuHaut li:hover a,.MenuHaut li:hover a:visited,.MenuHaut li:hover a:hover,.MenuHaut li a:hover{
	color:#cccccc;

}
.MenuHaut li:hover li a, .MenuHaut li li:hover li a,
.MenuHaut li li li:hover li a, .MenuHaut li li li li:hover li a,
.MenuHaut li:hover li a:visited, .MenuHaut li li:hover li a:visited,
.MenuHaut li li li:hover li a:visited, .MenuHaut li li li li:hover li a:visited
{
	color:#DAA520;

}
.MenuHaut li li:hover, .MenuHaut li li li:hover,
.MenuHaut li li li li:hover , .MenuHaut li li li li li:hover , .MenuHaut li li li li li li:hover
{

    background: ; /*survol sous menu*/
	z-index:9999;
}
.MenuHaut li li:hover a,.MenuHaut li li li:hover a,
.MenuHaut li li li li:hover a, .MenuHaut li li li li li:hover a
{
	color: #cccccc;
}

.MenuHaut ul ul a, .MenuHaut ul ul a:visited,
.MenuHaut li li a, .MenuHaut li li a:visited
{
	color: #DAA520;
}
.MenuHaut ul ul a:hover,
.MenuHaut li:hover li:hover a,.MenuHaut li:hover li:hover a:visited ,
.MenuHaut li:hover li:hover li:hover a,.MenuHaut li:hover li:hover li:hover a:visited,
.MenuHaut li:hover li:hover li:hover li:hover a,.MenuHaut li:hover li:hover li:hover li:hover a:visited ,
.MenuHaut li:hover li:hover li:hover li:hover li:hover a,.MenuHaut li:hover li:hover li:hover li:hover li:hover a:visited,
.MenuHaut li:hover li:hover li:hover li:hover li:hover li:hover a,.MenuHaut li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
	color: #cccccc;
}
.MenuHaut li:hover li:hover li a,.MenuHaut li:hover li:hover li a:visited ,
.MenuHaut li:hover li:hover li:hover li a,.MenuHaut li:hover li:hover li:hover li a:visited,
.MenuHaut li:hover li:hover li:hover li:hover li a,.MenuHaut li:hover li:hover li:hover li:hover li a:visited,
.MenuHaut li:hover li:hover li:hover li:hover li:hover li a,.MenuHaut li:hover li:hover li:hover li:hover li:hover li a:visited{
	color: #DAA520;
}


HTML :

<ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>

      <li><a href="#">Menu 3</a>
      <ul>
         <li><a href="#">Smenu 1</a></li>
         <li><a href="#">Smenu 2</a></li>
         <li><a href="#">Smenu 3</a></li>
         <li><a href="#">Smenu 4</a></li>
      </ul>
      </li>



      <li><a href="#">Menu 4</a>
      <ul>
         <li><a href="#">Smenu 1</a></li>
         <li><a href="#">Smenu 2</a></li>
         <li><a href="#">Smenu 3</a></li>
         <li><a href="#">Smenu 4</a></li>
         <li><a href="#">Smenu 5</a></li>
      </ul>
      </li>



      <li><a href="#">Menu 5</a></li>
      <li><a href="#">Menu 6</a></li>
      <li><a href="#">Menu 7</a></li>
      <li><a href="#">menu 8</a></li>
      <li><a href="#">Menu 9</a></li>
</ul>


</div>

Modifié par fuerchan (10 Sep 2012 - 18:04)
Salut,

ton code est trop long je crois, tu ne devrais garder pour ce sujet que la partie significative.

Je ne sais pas à quoi ressemblent tes flêches, mais si elles sont très simples tu pourrais sans doute remplacer tes 

.MenuHaut{
    background-image: url(../images/fond_contenu.png);
}

par des 

.MenuHaut:before{
content:"\u2192";
}


Pour comprendre d’où sort ce \u2192, voir http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

En espérant avoir aidé…

Ciao
Bonjour,

Je suis bien conscient de la longueur du code... Mais ne sachant pas où travailler le code pour obtenir ce que je recherche, je ne peux pas sélectionner telle ou telle partie...

Concernant le background-image pour MenuHaut je ne veux pas l'enlever car il s'agit du fond général du menu.

Pour la flèche c'est juste une petite image de 10x10 px. Qui m'est préférable à :before Smiley cligne

Merci
F.
Bonsoir,

Le :before n'empêche pas de mettre une image. Il suffit de donner mettre un contenu vide, une taille, un style en inline-block et une image de fond.
Mais peut-être vaut-il mieux regarder du côté de la propriété list-style-image.
Sujet clos
Aller à