Bonsoir,
Je bloque complètement sur un truc qui pourtant devrait me sauter aux yeux :
Voici un menu avec 4 options principales et des sous-menus de niveau 1 puis 2.
Je n'arrive pas à avoir les sous-menus 1 et 2 avec la même taille de police que le menu horizontal.
La largeur des options des sous-menus de niveau 1 est plus petite que les options du menu horizontal
Lorsque je vais sur une option de sous-menu, la possibilité de cliquer n'apparaît pas sur les bords de l'option, il faut aller vers le centre, alors que le changement de couleur s'opère bien.
Merci d'avance
Je bloque complètement sur un truc qui pourtant devrait me sauter aux yeux :
<!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">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Page sans titre</title>
<style type="text/css">
#nav
{
list-style: none;
/* Pour éviter un décalage du contenu lorsque le menu est déroulé */
position: absolute;
/* Pour positionner le menu dans la page par rapport à la gauche et au haut du formulaire */
left: 0px;
top: 70px;
}
#nav ul
{
padding: 0;
margin:0;
list-style: none;
width:11.5em;
z-index:99;
position:relative;
overflow:visible;
}
/* Entête de menu */
#nav li {
margin:0;
position: relative;
float:left;
background: #ffffcc url("../images/fond_menu_off.gif") repeat-x;
border-top: 1px solid #cccc99;
border-right: 2px solid #cccc99;
display:block;
font: bold 0.9em Verdana;
color: #333300;
height: 6px;
text-align:center;
padding:2px 7px 15px 7px;
}
/* Fond des options des sous-menus 2 */
#nav ul li
{
background: #ffffcc url("../images/fond_menu_off.gif") repeat-x;
}
/*Bordure des options de sous-menus 1 */
#nav ul li
{
border-width:1px 1px 0 0;
/* Bordure transparente en haut et à droite d'une option */
border-top: 1px solid #ffffcc;
border-right: 1px solid #ffffcc;
}
/*Bordure des options de sous-menus 2 */
#nav ul ul li
{
border-width:1px 1px 0 1px;
/* Bordure transparente en haut et à droite d'une option */
border-top: 1px solid #ffffcc;
border-right: 1px solid #ffffcc;
}
/*Bordure de la dernière option de sous-menus 2 */
#nav ul ul li:last-child
{
border-width:1px;
/* Bordure transparente en haut et à droite d'une option */
border-top: 1px solid #ffffcc;
border-right: 1px solid #ffffcc;
}
/* Définition primaire de tous les niveaux <a> et de la couleur de la police*/
#nav a
{
text-decoration:none;
display:block;
padding: 0.1em;
color: #333300;
margin:0.2em 0 0.2em 0.1em;
/* largeur et hauteur d'une option*/
width:11.5em;
height:1.05em;
}
/* Fond d'option du sous_menu 1 */
#nav a:hover, #nav li:hover{
background: #ffffcc ;
color: #333300;
}
/* Fond d'option de sous-menus 1 et 2 lors du passage de la souris*/
#nav ul li:hover, #nav ul li a:hover
{
background: #333300 ;
color: #ffffcc;
}
#nav ul{
display:none;
}
/*positionnement des sous menu niveau 1 et 2. décallage par rapport au menu précédent*/
#nav ul ul, #nav ul ul ul
{
display:none;
position:absolute;
margin-top:-1.8em;
margin-left:12em;
}
/* non-IE browsers */
#nav ul li>ul, #nav ul ul li>ul
{
margin-top:-1.35em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul, #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul{
display:block;
}
li>ul {
top: auto;
left: auto;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">Processus</a>
<ul>
<li><a href="">Sauvegarde</a></li>
</ul>
</li>
<li> <a href="#">Alertes</a>
<ul>
<li><a href="">Historique</a>
<ul>
<li><a href="">Du mois</a>
<li><a href="">Du trimestre</a>
<li><a href="">De l'année</a>
</ul>
</li>
<li><a href="">Ouverture</a></li>
<li><a href="">Messages</a></li>
</ul>
</li>
<li> <a href="">Import</a></li>
<li> <a href="">Demandes</a> </li>
</ul>
</body>
</html>Voici un menu avec 4 options principales et des sous-menus de niveau 1 puis 2.
Je n'arrive pas à avoir les sous-menus 1 et 2 avec la même taille de police que le menu horizontal.
La largeur des options des sous-menus de niveau 1 est plus petite que les options du menu horizontal
Lorsque je vais sur une option de sous-menu, la possibilité de cliquer n'apparaît pas sur les bords de l'option, il faut aller vers le centre, alors que le changement de couleur s'opère bien.
Merci d'avance