Créer une liste déroulante

20 nov. 2015, 18:15

Bonsoir,

bon j'aimerai créer une liste déroulante comme celle la

je ne sais pas comment y parvenu je suis bloqué au code HTML mais pr css je sais pas comment y arriver

et merciii énormément

21 nov. 2015, 00:03

Bonjour,

Voici le principe d'un menu simple en HTML/CSS/JS

<ul class="menu">
	<li id="menu1" class="menu-element" onmouseover="afficher_menu(1)" >Menu 1</li>
	<ul id="menu1-deroulant" class="menu-deroulant" style="display:none">
		<li><a href="?menu1-1"><i class="lien">Texte du lien 1.1</i></a></li>
		<li><a href="?menu1-2"><i class="lien">Texte du lien 1.2</i></a></li>
		<li class="separateur"></li>
		<li><a href="?menu1-3"><i class="lien">Texte du lien 1.3</i></a></li>
		<li><a href="?menu1-4"><i class="lien">Texte du lien 1.4</i></a></li>
	</ul>
	<li id="menu2" class="menu-element" onmouseover="afficher_menu(2)">Menu 2</li>
	<ul id="menu2-deroulant" class="menu-deroulant" style="display:none">
		<li><a href="?menu2-1"><i class="lien">Texte du lien 2.1</i></a></li>
		<li><a href="?menu2-2"><i class="lien">Texte du lien 2.2</i></a></li>
		<li class="separateur"></li>
		<li><a href="?menu2-3"><i class="lien">Texte du lien 2.3</i></a></li>
		<li><a href="?menu2-4"><i class="lien">Texte du lien 2.4</i></a></li>
		<li><a href="?menu2-5"><i class="lien">Texte du lien 2.5</i></a></li>
		<li class="separateur"></li>
		<li><a href="?menu2-6"><i class="lien">Texte du lien 2.6</i></a></li>
	</ul>
</ul>

<style>
.menu {
	width:100%;
	cursor: pointer;
}
.menu li {
	list-style-type: none;
}
.menu li:hover,a:hover {
	color: #FFF;
	background-color: #666;
}
.menu a {
	text-decoration: none;
}
.menu-element {
  font-weight: bold;
  font-size: 12pt;
  padding: 5px;
}
.menu-deroulant {
    width: 120px;
    padding: 5px;
    color: #666;    
	background-color: #FFFe;
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2);
}
.lien {
    text-align: center;
    margin-left: 5px;
}
.separateur {
    height: 2px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}
</style>
<script>
function afficher_menu(id){
	for (i=1; i<=2; i++){
		document.getElementById('menu'+i+'-deroulant').style.display = 'none';
	}
	document.getElementById('menu'+id+'-deroulant').style.display = '';
}
</script>

22 nov. 2015, 02:47

meri pr ta réponse
bon j'ai essayé mon maximum pour y parvenir à ici, mais toujours pas le resultat ideale

comme vous pouvez le voir y'a un peu d'esapce entre bordure, j'ai essayé avec margin:0 padding:0 mais rien ne se passe
et aussi je veux enlever juste une partie de la bordure, qui est exactement en dessous de l'icone

voila code html

Code : Tout sélectionner

<ul id="menu-demo2">
                         <li><a><img src="../img/avatar.png"></a>
                                     
        <ul>
            <li><a href="#">lien sous menu 1</a></li>
            <li><a href="#">lien sous menu 1</a></li>
         
        </ul>
    </li>
         
     </ul>

et voila code css

Code : Tout sélectionner

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
margin-top:4px;
list-style:none;
text-align:center;
position:absolute;
left:96.5%;
width:144px;
 
}
#menu-demo2 ul{
border-right:1px solid #B0B5B4;
border-left:1px solid #B0B5B4;
 
 
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-radius:0px 0px 0 0;
width:80px;
     
 
 
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
width:144px;
height:45px;
border-bottom:1px solid #B0B5B4;
border-top:1px solid #B0B5B4;
 
}
#menu-demo2 ul li:hover{
     
border-radius:0;
 
 
}
#menu-demo2 ul li:last-child{
border-radius:0 0 0px 0px;
 
 
}
#menu-demo2 ul{
position:absolute;
z-index: 1000;
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{
background-color: #65537A;
 
 
}
#menu-demo2 li:nth-child(2){
background-color: #729EBF;
background-image: -webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
background-image:linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
}
#menu-demo2 li:nth-child(3){
background-color: #F6AD1A;
background-image:-webkit-linear-gradient(top, #F6AD1A 0%, #9F391A 100%);
background-image:linear-gradient(to bottom, #F6AD1A 0%, #9F391A 100%);
}
#menu-demo2 li:last-child{
 
background-image:-webkit-linear-gradient(top, #CFFF6A 0%, #677F35 100%);
background-image:linear-gradient(to bottom, #CFFF6A 0%, #677F35 100%);
 
}
/* background des liens sous menus */
#menu-demo2 li:first-child li{
background-color:white;
}
#menu-demo2 li:nth-child(2) li{
background:#333A40;
}
#menu-demo2 li:nth-child(3) li{
background:#9F391A;
}
#menu-demo2 li:last-child li{
background:#677F35;
 
}
/* background des liens menus et sous menus au survol */
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
background:#65537A;
 
}
#menu-demo2 li:nth-child(2):hover, #menu-demo2 li:nth-child(2) li:hover{
background:#729EBF;
}
#menu-demo2 li:nth-child(3):hover, #menu-demo2 li:nth-child(3) li:hover{
background:#F6AD1A;
}
#menu-demo2 li:last-child:hover{
background-color:#273544;
border-top:5px solid #5dade2;
border-left:1px solid #B0B5B4;
border-right:1px solid #B0B5B4;
}
 
 
#menu-demo2 li:last-child{
background:none;
border-top:5px solid transparent;
 
}
#menu-demo2 li:last-child li:hover{
background:#5dade2;
}
#menu-demo2 li:last-child li{
background:#273544;
 
 
 
 
}
/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px;
color:black;
 
font-family:'lato';
}
#menu-demo2 ul a{
padding:8px 0;
position:relative;
bottom:60%;
 
}
#menu-demo2 li:hover li a{
color:#fff;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

23 nov. 2015, 20:05

bon je suis arrivé à ca

et maintenant je veux mettre une bordure juste du coté droite en dessous de l'image

Créer une liste déroulante

Qui est en ligne