Menu déroulant horizontal : css+javascript

Salut,

je suis entrain d'adapter un menu déroulant en css pour mon site à partir d'un de vos tutos : menu déroulant en adaptant cet exemple : menu css+javascript

Et voici comment je l'ais adapté :

http://images2.hiboox.com/vignettes/3707/495zk67u.jpg


Mais il y a deux choses que je n'arrive pas à faire :

- je voudrais que le menu soit d'un seul bloc, j'ai bien réussi a enlever l'espace d'un pixel entre les cases mais j'ai toujours une bordure de chaque coté que je n'arrive pas à supprimer

- je voudrais que les sous menu soit séparé les uns des autres chacun dans leurs cases avec un léger espace entre chacun.

Je sais que tout ceci est possible mais je ne trouve pas ou ce qu'il faut modifier pour y arriver. Voici le code modifier :

/* Barre de menu du site */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; 
top: 0px;			
left: 0px;			
z-index:100;
width: 100%; 		
}
#menu dl {
float: left;
color: #ffffff;		
width: 6em;			
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #82373c;		
border: 4px ridge #82373c;  
margin: 1px;				
}
#menu dd {
display: none;
border: 4px ridge #82373c;	
}
#menu li {
text-align: center;
background: #82373c;		
}
#menu li a, #menu dt a {
color: #ffffff;				
text-decoration: none;
display: block;
height: 1%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #82373c;		
}

Modifié par Yuujin (12 Sep 2007 - 19:16)

Bonjour,

- pour supprimer l'espacement entre les éléments du menu :
dans le bloc #menu dt supprime

margin:1px;

ou met la valeur de cet attribut à 0.

- pour avoir des blocs séparés et espacés dans les sous menus.
dans le bloc #menu dd supprime la ligne

border: 4px ridge #82373c;

dans le bloc #menu li ajoute

border: 4px ridge #82373c;
margin-top:1px;

Modifié par NeoNeit (14 Sep 2007 - 21:25)

Merci de ta réponse NeoNeit c'est parfait

j'ai essayé différent chose pour mettre un bord au tour du menu mais le mieux que j'ai pu obtenir c'est ceci :

http://images2.hiboox.com/vignettes/3707/2hthi4w2.jpg

alors que je voudrais qu'il n'y ait pas de séparation comme ceci :

http://images2.hiboox.com/vignettes/3707/hh5wbq0w.jpg

je pense que ca doit etre une petite modif comme précédemment mais je ne vois pas , ou sinon quand j'ai juste le contour mais sous menu se déroule dans le le cadre c'est plutot bizarre.

Saurais tu comment faire ? (voici le code correspondant au premier screen)

/* Barre de menu du site */

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
top: 0px;			
left: 0px;
z-index:100;
}
#menu dl {
float: left;
color: #ffffff;		
width: 6em;
}
#menu dt {
cursor: pointer;
text-align: center;
background: #82373c;
border: 4px ridge #82373c;
}
#menu dd {
display: none;
}
#menu li {
text-align: center;
background: #82373c;
border: 4px ridge #82373c;
margin-top: 3px;
}
#menu li a, #menu dt a {
color: #ffffff;				
text-decoration: none;
display: block;
height: 1%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #82373c;
}

Modifié par Yuujin (15 Sep 2007 - 14:45)

Un petit up y me manque que la bordure du menu principal si quelqu'un peut m'aider