28173 sujets

CSS et mise en forme, CSS3

Déploiement d'un menu sur le survol d'un lien

Bonjour,
Smiley smile

j'essaie de mettre en place une suite de menus qui déploient leurs sous-menus quand on survole leurs libellés.
en fait le lien enserre le libellé du menu plus la liste des items ul des sous-menus. les items sont également sous forme de liens. le bloc a qui enserre le libellé du menu + la liste a la classe "premier" ou "deuxieme" ou "troisieme"

sur le hover de a.[n]ieme, le lien se déploie en bloc. le problème est qu'il faut que je donne manuellement une dimension qui soit fonction du nombre de mes sous-menus pour chaque menu...

voici le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test_liste_masquer2</title>
  <style title="all" media="all" type="text/css">
a { 
width: 200px;
height: 200px;
}
a ul {
 display: none;
background-color: rgb(102, 204, 204);
}

a:hover ul
{display:block}

a.premier:hover { 
width: 200px;
display: block;
height: 115px;
}
a.deuxieme:hover {
 width: 200px;
display: block;
height: 100px;
}
a.troisieme:hover {
 width: 200px;
display: block;
height: 100px;
}
  </style>
</head>
<body>
<a class="premier" href="#">menu1<br>
<ul>
  <li><a href="#">item 1</a></li>
  <li =""><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
  <li><a href="#">item 5</a></li>
</ul>
</a>
<br>
<a class="deuxieme" href="#">menu 2<br>
<ul>
  <li><a href="#">item 1</a></li>
  <li =""><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>
</a><br>
<a class="troisieme" href="#">menu 3<br>
<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>
</a>
</body>
</html>


comment faire en sorte que la taille de mon bloc a.[n]ieme:hover se redimensionne automatiquement en fonction des items qu'il contient?

Merci!

Smiley smile
Modifié par rootsoo (02 Feb 2006 - 13:04)
Sujet clos
Aller à