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 :
Et voici mon le bout de CSS qui gère le menu :
Modifié par Felipe (24 Mar 2011 - 17:45)
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)