Forum d'entraide PHPFrance

Bonjour à tous,

Voilà je desirai faire un menu deroulant en css avec entre chaque menu une image qui est une barre horizontale, le probleme est que je n'arrive pas à l'enlever cette image dans les sous menu exemple à cette adresse http://s284810043.onlinehome.fr/menu.php (menu Galerie)

voici mon fichier menu.php

Code : Tout sélectionner

<div id="menu">
<ul>
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Galerie</a>
     <ul>
      <li><a href="galerie.php">Gallerie 1</a></li>
      <li><a href="gal.php">Gallerie 2</a></li>
      <li><a href="#">Gallerie 3</a></li>
    </ul>
  </li>
  <li><a href="#">Exposition</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

et voici mon fichier css:

Code : Tout sélectionner

#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
font: bold 100% Tahoma;
}
#menu ul li {
float: left;
padding: 2px 2px;
text-decoration: none;
background: transparent url(../images/vertical.gif) center right no-repeat;
}
#menu li a {
display:block;
width:100px;
font-family:Arial;
font-size:12px;
color:#5D5D5D;
text-decoration:none;
padding:0px;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}

D'avance merci de votre aide,

muriel

je reponds à mon propre message, voici la reponse:

Code : Tout sélectionner

#menu li ul li {
    background: none;
}

Donc auto résolu ?

Ah oui en regardant ton code, j'ai bien peur qu'il ne fonctionne pas avec IE6 qui (bien que j'en sois désolé également) représente encore près de 20% des parts de marché.

tu as raison ab, et meme sur ie7 le sous-menu se met à droite du menu, une aide serait la bienvenue

muriel

J'aurais fais un truc à la

Code : Tout sélectionner

#menu ul li {
	float: left;
	background: transparent url(../images/vertical.gif) center right no-repeat;
	height: 16px;
	line-height: 16px;
	width: 100px;
}

#menu ul li ul {
	display: block;
	overflow: hidden;
	height: 16px;
}

#menu ul li ul:hover {
	height: auto;
	overflow: visible;
}

Ne marche pas non plus sous IE6 mais passe fous Firefox

merci Elie pour ton code, alors sous firefox ça marche parfaitement mais sous ie7 alors là s'est tres bizarre car il affiche constamment la premiere ligne et cela à l'horizontale, je te propose de te rendre sur ce lien pour voir le menu http://s284810043.onlinehome.fr/menu1.php

voici le code du css

Code : Tout sélectionner

#menu ul {
    width:520px;
    margin-left:auto;
    margin-right:auto;
   margin:0;
   padding:0;
   list-style-type:none;
   text-align:center;
   font: bold 100% Tahoma;
}
#menu ul li { 
   float: left; 
   background: transparent url(../images/vertical.gif) center right no-repeat; 
   height: 16px; 
   line-height: 16px; 
   width: 100px; 
} 

 #menu li a {
 display:block;
 width:100px;
 color:#a09b9b;
 font-family:Arial;
 font-size:12px;
 text-decoration:none;
 padding:0px;
 }
 #menu li ul li {
    background: none;
}
#menu ul li ul { 
   display: block; 
   overflow: hidden; 
   height: 16px; 
} 

#menu ul li ul:hover { 
   height: auto; 
   overflow: visible; 
}
#menu li:hover ul li {
 height: auto; 
   overflow: visible; 
}
#menu li ul {
 position:absolute;
 }
#menu {
 height:50px;
 }

merci de ton aide elie,

muriel

Ne marche pas non plus sous IE6 mais passe fous Firefox

Après vérifications, IE6 agonise mais a encore entre 10 et 15% de parts de marché.

http://www.alsacreations.com/actu/lire/ ... onise.html

Alors surtout pour des menus, c'est un peu chaud de ne pas prendre en compte les derniers jours (années) de ce navigateur.
Bon évidemment si c'est un site pour une petite communauté de copains ou des spécialistes du web, ça peut le faire.
Mais si c'est pour s'adresser au grand public, un professionnel n'accepterait jamais de perdre entre 10 à 15 % de visiteurs ...

Forum d'entraide PHPFrance

Menu deroulant en CSS

Menu deroulant en CSS