5568 sujets

Sémantique web et HTML

Bonjour,
Je cherche actuellement à faire un site avec un menu horizontal, un sous menu vertical et un sous sous menu horizontal.
J'ai cherché un moment et je n'arrive pas à faire mon sous sous menu en horizontal... Pour le reste tout marche nickel !
Quelqu'un aurait une solution pour mon problème ?
Merci d'avance.
Voici mon bon de code :
<ul id="menu"> 
<li> 
<a href="#">XXX</a> 
</li> 
<li> 
<a href="#">XXX</a> 
<ul> 
<li><a href="#">XXX</a> 
<ul><li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
</ul> 
</li> 
<li><a href="#">XXX</a> 
<ul><li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
</ul> 
</li> 
<li><a href="#">XXX</a> 
<ul><li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
</ul> 
</li> 
<li><a href="#">XXX</a> 
<ul><li><a href="#">XXX</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li> 
<a href="#">XXX</a> 
<ul> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
<li><a href="#">XXX</a></li> 
</ul> 
</li> 
<li> 
<a href="#">XXX</a> 
</li> 
</ul> 
</div> 

Et voici mon le bout de CSS qui gère le menu :
#menu, #menu ul 
{ 
padding : 0; 
margin : 0; 
list-style : none; 
line-height : 21px; 
text-align : left; 
} 
#menu 
{ 
font-family : Arial; 
font-size : 14px; 
margin-top: 60px; 
float: right; 
} 
#menu a 
{ 
display : block; 
padding : 0; 
color : #000; 
text-decoration : none; 
width : 110px; 
} 
#menu li 
{ 
float : left; 
border-right : 1px solid #fff; 
} 
html>body #menu li 
{ 
border-right: 1px solid transparent ; 
} 
#menu li ul 
{ 
position: absolute; 
width: 105px; 
left: -999em; 
} 
#menu li ul li 
{ 
border-top : 1px solid #fff; 
} 
html>body #menu li ul li 
{ 
border-top : 1px solid transparent; 
} 
#menu li ul ul 
{ 
margin : -22px 0 0 100px ; 
border-left : 1px solid #fff ; 
list-style-type:none; 
} 
html>body #menu li ul ul 
{	
border-left : 1px solid transparent ; 
} 
#menu li ul ul {	
margin : -22px 0 0 105px ; 
float:left; 
} 
#menu a:hover 
{ 
color: #000; 
} 
#menu li:hover ul ul, #menu li.sfhover ul ul 
{	
left: -999em; 
} 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{ 
left: auto; 
min-height: 0; 
}

Modifié par Felipe (24 Mar 2011 - 17:45)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Voilà en gros la structure du menu que j'aimerai avoir, il se déploie de façon vertical puis en horizontal.

upload/37043-Image2.png