J'aimerais faire un menu déroulant sous forme de liste mais afficher en plusieurs. Je voudrais que quand je déroule la liste, le menu déroulant du dessous est poussé et n'empiète pas sur le l'autre du dessous.
Voici a quoi ressemble mon problème :
Et voici le résultat que je veux :
En gros quand le menu est dérouler il doit poussé l'autre menu en bas et ne pas impiéter dessus.
Mon code css :
Code : Tout sélectionner
#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
}
#menu-demo2 li{
display:inline-block;
position:relative;
text-align: left;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul li:hover{
border-radius:0;
}
#menu-demo2 ul{
position:absolute;
max-height:0;
left: 0;
right: 0;
overflow:hidden;
-moz-transition: .8s all .3s;
-webkit-transition: .8s all .3s;
transition: .8s all .3s;
}
#menu-demo2 li:hover ul{
max-height:15em;
}
/* background des liens menus */
#menu-demo2 li:first-child{
width: 100%;
background-color: #800D14;
background-image:-webkit-linear-gradient(top, #800D14; 0%, #2A2333 100%);
background-image:linear-gradient(to bottom, #800D14; 0%, #2A2333 100%);
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background:#fff;
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#800D14;
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
font-family:arial;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color:#800D14;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#fff;
}Code : Tout sélectionner
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all"/>
</head>
<ul id="menu-demo2">
<li><a href="#">Listes des combats en attente...</a>
<ul>
<li>lien sous menu 1</li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>
</li>
</ul>
<br>
<ul id="menu-demo2">
<li><a href="#">Listes des combats en cours...</a>
<ul>
<li>lien sous menu 1</li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
<li><a href="#">lien sous menu 1</a></li>
</ul>
</li>
</ul>
