28172 sujets

CSS et mise en forme, CSS3

Problème avec menu css et hover

Bonjour,

Je débute en css. Je suis entrain d'essayer de faire un menu en css pourtant très simple, mais j'ai un petit problème que je n'arrive pas à résoudre.
Donc si quelqu'un peut m'aider? merci d'avance

Mon problème:
Mon menu se compose de lien qui au passage de la souris ouvre une div avec le contenu de chaque menu. Pour l'instant pas de problème.
Mais si j'ajoute un lien dans mon contenu (comme dans le menu3 de mon exemple), le contenu de la div reste tous le temps visible.

Je pourrais régler le problème en remplaçant les liens qui ouvre les div par des balises span, mais pour des raisons de compatibilité avec IE et hover je souhaiterais garder des ancres.

Si quelqu'un à une idée.

Mon code:

<style>

  .parent {   
    position: relative;   
    background-color: #333666;         
    width:  100%; }

.menu {
list-style-type: none;
 
}
.menu li {
float: left;

}
.menu a {

display: block;
text-align:  center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;

}
.menu a div {
    display: none;
}
.menu a:hover {
background: #ccc;
border: 1px solid gray;

}
.menu a:hover div {
    display: block;
    position: absolute;
    top: 2em;
    left: 0em; 
    background-color: #ffff00;
    width: 100%;
    height-min: 10px;  
}
.menu a:active {
background: gray;
color: #fff;
}
 
  
  </style>



<body>
 <div class="parent">
   <ul class="menu">
      <li><a>Menu1<div>contenu  menu1</div></a></li>
    <li><a>Menu 2<div>contenu  menu2</div></a></li>  
     <li><a>Menu 3<div>contenu menu3<a href="www.monsite.com">mon site</a></div></a></li>
    </ul>
</div>
</body>
Bonjour,

D'un point de vue logique ton menu ne tiens pas la route (un lien dans un lien ?).

Un menu déroulant n'est pas du niveau débutant, cela nécessite de bonne connaissance en HTML, en CSS et en JavaScript (qui doit être utiliser pour dérouler le menu).
Bonjour,

Je me suis bien rendu compte qu'il y avait un problème avec les liens.

Je voulais juste savoir si il y avait une autre solution que changer la balise qui reçoit le hover,
j'arrive à faire mon menu en utilisant la balise <li>, mais j'ai lu que pour la compatibilité avec IE il fallait utilisé hover uniquement avec la balise <a>.

Concernant javascript, j'utilisais ce style de menu avant, mais apparement il y a pas mal de personne qui désactive javascript, donc le contenu du menu ne leur était plus accesible, c'est pourquoi je me tourne vers une solution uniquement Html CSS

Merci
Modifié par alsab (07 Jun 2010 - 11:46)
Il y a plus de personnes qui utilisent IE6 que de personne désactivant JavaScript. De plus un menu déroulant bien conçu ne posera pas de problème si JS est désactivé (cela s'appelle du JS non obstrusif).

Tu pourras trouver un tuto de menu déroulant utilisant Jquery dans la section "Apprendre" du site.
Sujet clos
Aller à