bonjour
je veux avoir un menu verticale que lorsque je passe la souris sur un des menus il m'affiche une liste verticle directement sous le menu
et qlq elts de cette liste lorsque je passe la souris sur eux j'aimerai avoir une autre liste verticle a coté de celle ci et commence de l'element ou j'ai passé la souris
comme le word et ....
et aussi cette barre de menu de ce site
je me suis basé sur un code le voila
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Menu</title>
<link type="text/css" rel="stylesheet" href="essaimenu2.css" />
</head>
<body>
<ul id="menu">
<li><a href="#"><span>I.Menu</span></a>
<ul>
<li><a href="#">I.1.Sous menu</a></li>
<li><a href="#"><span>I.2.Sous menu</span></a>
<ul>
<li><a href="#"><span>I.2.a.Sous sous menu</span></a>
<ul>
<li><a href="#">I.2.a.i.Sous sous sous menu</a></li>
<li><a href="#">I.2.a.ii.Sous sous sous menu</a></li>
<li><a href="#">I.2.a.iii.Sous sous sous menu</a></li>
</ul>
</li>
<li><a href="#"><span>I.2.b.Sous sous menu</span></a>
<ul>
<li><a href="#">I.2.b.i.Sous sous sous menu</a></li>
<li><a href="#">I.2.b.ii.Sous sous sous menu</a></li>
<li><a href="#">I.2.b.iii.Sous sous sous menu</a></li>
</ul>
</li>
<li><a href="#">1.2.c.Sous sous menu</a></li>
</ul>
</li>
<li><a href="#">I.3.Sous menu</a></li>
</ul>
</li>
<li><a href="#"><span>II.Menu</span></a>
<ul>
<li><a href="#">II.1.Sous menu</a></li>
<li><a href="#">II.2.Sous menu</a></li>
<li><a href="#">II.3.Sous menu</a></li>
</ul>
</li>
<li><a href="#">III.Menu</a></li>
</ul>
<script type="text/javascript">
<!--
setHover();
--> </body>
</html>et le css :
Code :
ul#menu li ul {display: none;} /* On cache les sous éléments */
#menu
{
width: 760px; /* largeur de toute la liste*/
list-style-type: none; /* pour empecher les puces */
margin-left: 131px;
position: absolute; /*Pour éviter un décalage du contenu lorsque le menu est déroulé*/
padding: 0;
border: 0;
}
#menu li
{
float: left; /* pour rendre liste verticale ou bien display: inline*/
width: 96px; /* largeur de chauque elt de la liste */
margin:0;
padding: 0;
border: 0;
}
#menu lu, #menu lu lu
{
display: none; /* pour ne pas s'afficher */
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
ul#menu li:hover > ul {display: block;} /* On affiche les éléments survolés par la souris */