Aide pour menu

Bonjour,

Je viens vous demander un petit coup de main concernant un menu en CSS,
Il comporte un menu principal et un sous menu,

Le problème est que pour le moment le sous menu est vertical, or je voudrais qu'il soit horizontal,
J'ai essayé quelques petites choses mais sans grand succès

Voilà mon code css:

*{padding:0; margin:0;}
body {font-size:62.5%; font-family:verdana,arial,sans-serif;}

.menu2 {
white-space:nowrap /*IE hack*/; 
float:left; 
width:994px; 
border:none; 
background:rgb(0,0,0); 
color:rgb(0,0,0); 
font-size:130%;
}

.menu2 ul {
list-style-type:none;
}

.menu2 ul li {
float:left; 
z-index:auto !important /*Non-IE6*/; 
z-index:1000 /*IE6*/; 
border-right:solid 1px rgb(175,175,175);
}

.menu2 ul li a {
float:none !important /*Non-IE6*/; 
float:left /*IE-6*/; 
display:block; 
height:3.1em; 
line-height:3.1em; 
padding:0 16px 0 16px; 
text-decoration:none; 
font-weight:bold; 
color: rgb(255,255,255);
}

.menu2 ul li ul {
display:none; border:none;
}

/*Non-IE6 hovering*/

.menu2 ul li:hover {
position:relative;
background-color:rgb(210,0,0); 
}

.menu2 ul li:hover a {
text-decoration:none;
}

.menu2 ul li:hover ul {
display:block; 
width:10.0em; 
position:absolute; 
z-index:999; 
top:3.0em; 
margin-top:0.1em; 
left:0;
}

.menu2 ul li:hover ul li a {
white-space:normal; 
display:block; 
width:10.0em; 
height:auto; 
line-height:1.3em; 
margin-left:-1px; 
padding:4px 16px 4px 16px; 
border-left:solid 1px rgb(175,175,175); 
border-bottom: solid 1px rgb(175,175,175); 
background-color:rgb(237,237,237); 
font-weight:normal; 
color:rgb(50,50,50);
}

.menu2 ul li:hover ul li a:hover {
background-color:rgb(210,210,210); 
text-decoration:none;
}

/*IE6 hovering*/

.menu2 table {
position:absolute; 
top:0; 
left:0; 
border-collapse:collapse;
}

.menu2 ul li a:hover {
position:relative /*IE hack*/; 
z-index:1000 /*IE hack*/; 
background-color:rgb(210,210,210); 
text-decoration:none;
}

.menu2 ul li a:hover ul {
display:block; 
width:10.0em; 
position:absolute; 
z-index:999; 
top:3.1em; left:0; 
margin-top:0.1em;
}

.menu2 ul li a:hover ul li a {
white-space:normal; 
display:block; 
width:10.0em; 
height:1px; 
line-height:1.3em; 
padding:4px 16px 4px 16px; 
border-left:solid 1px rgb(175,175,175); 
border-bottom: solid 1px rgb(175,175,175); 
background-color:rgb(237,237,237); 
font-weight:normal; 
color:rgb(50,50,50);
}

.menu2 ul li a:hover ul li a:hover {
background-color:rgb(210,210,210); 
text-decoration:none;
}

@media print {.menu2 {float:left; width:994px; border:none; background:rgb(240,240,240); color:rgb(75,75,75); font-size:1.0em; font-size:130%;}}

Avez-vous une idée des changements à effectuer?
J'ai essayé de changer les "display:block;" pour le sous menu en "float:left", mais le sous menu n'était plus visible!
Merci d'avance!
Modifié par Piuu (13 Jan 2011 - 18:12)

Bonjour,

Petit up

Mets une page en ligne ça aidera à comprendre.

Sinon quand tu veux un ul à l'horizontale en général un petit display: inline; ou un float: left; sur les <li> et ça devrait rouler.