28172 sujets

CSS et mise en forme, CSS3

Menu déroulant avec sous menus horizontaux

Salut à tous,

J'ai un problème avec mon menu déroulant...J'y ai ajouté des sous menus horizontaux. Seulement, lorsque je passe la souris sur un item du menu, la liste se déroule bien horizontalement mais elle garde la largeur de son item.

Voir l'exemple ici


Je comprends pas trop...J'ai essayé de changer la largeur des items...mais bon.
Pouvez-vous m'aider ?

Voici mes codes :
body{
 font: 11px verdana, sans-serif;
 background: #AFA99B url("fond.jpg") top left no-repeat;
 margin: 0;
 padding: 0;
}
#menuDeroulant
{
 width: 100%;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 position: absolute;
 top: 0;
 left: 0;
} 
#menuDeroulant li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
}			
#menuDeroulant .sousMenu
{
display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: auto;
}
#menuDeroulant .sousMenu li
{
 float: left;
 margin: 0;
 padding: 0;
 border: 0;
 width: auto;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant li
{
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}		
#menuDeroulant li:hover > .sousMenu { display: block; }



<link href="style.css" rel="stylesheet" type="text/css" />
<ul id="menuDeroulant">
 <li>
  <a href="#">Partie 1</a>
  <ul class="sousMenu">
   <li><a href="#">castor</a></li>
   <li><a href="#">aligator</a></li>
   <li><a href="#">musclor</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Partie 2</a>
  <ul class="sousMenu">
   <li><a href="#">whisky</a></li>
   <li><a href="#">vodka</a></li>
   <li><a href="#">gin</a></li>
   <li><a href="#">vin</a></li>
   <li><a href="#">champagne</a></li>
 </ul>
 </li>
</ul>


Merci ! Smiley smile
Modifié par SuM (28 Oct 2009 - 12:02)
Bonjour SuM,

Chez moi, en utilisant une page XHTML valide et avec un doctype ça marche très bien Smiley cligne 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link href="style.css" rel="stylesheet" type="text/css" />
   </head>
   
<body>
   

<ul id="menuDeroulant">

 <li>

  <a href="#">Partie 1</a>

  <ul class="sousMenu">

   <li><a href="#">castor</a></li>

   <li><a href="#">aligator</a></li>

   <li><a href="#">musclor</a></li>

  </ul>

 </li>

 <li>

  <a href="#">Partie 2</a>

  <ul class="sousMenu">

   <li><a href="#">whisky</a></li>

   <li><a href="#">vodka</a></li>

   <li><a href="#">gin</a></li>

   <li><a href="#">vin</a></li>

   <li><a href="#">champagne</a></li>

 </ul>

 </li>

</ul>
   
</body>

</html>


Voilà Smiley cligne .
Modifié par jQz (28 Oct 2009 - 13:41)
C'est trop bizarre...Moi en utilisant ton code, j'ai un décalage énorme quand je survole les items "Partie 1" et "Partie 2"...
Es-ce que c'est possible de voir ton image nommée fond.png que tu appliques au background du body ?
Sujet clos
Aller à