Aller au contenu principal
Guillaume Duverger Code & graphisme

CSS dropdown menu avec pseudo-classe :has()

Votre navigateur ne supporte pas cette démonstration




<ul class="nav-ex">

<li><a href="">Rubrique</a>
<li><a href="">Rubrique</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
<li><a href="">lien 3</a></li>
</ul>
</li>
<li><a href="">Rubrique</a></li>
<li><a href="">Rubrique</a>
<ul>
<li><a href="">lien 1</a></li>
<li><a href="">lien 2</a></li>
</ul>
</li>
<li><a href="">Rubrique</a></li>

</ul>







*{box-sizing: border-box}

ul{/*reset*/
list-style-type: none;
padding:0;
margin:0
/*reset*/	
}
	
	
.nav-ex{

max-width: 960px;
overflow: hidden;
margin: 5rem auto;
border: 1px solid #cccccc;

	
	}

.nav-ex  > li{

background-color:#f5f5f5;

}
	
	

	
.nav-ex  li:not(:last-child){
	
	border-bottom:1px solid #cccccc;
	
	}	
	
	
.nav-ex a {
	
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: #555;
font-size: 1.25rem;	
text-decoration: none;
	
}


	

.nav-ex  li >  ul {

overflow: hidden;
background-color:#fafafa;
max-height:0;
transition:max-height 400ms,display 400ms;  
transition-timing-function: ease-in-out

}
	
	


	
.nav-ex li a:not(:last-child){

	position: relative;
	
	}
	
.nav-ex li:has(ul) > a::before {

position:absolute;
right:.5rem;
content:'';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom: 0;
border-top: 12px solid currentcolor;
top: 0;
bottom: 0;
margin: auto;
transition: rotate 0.4s;
}	
	
.nav-ex li:focus-within ul{

max-height: 300px;
	
}
	
@starting-style {.nav-ex li:focus-within ul {max-height:0}}
	
.nav-ex li:focus-within > a::before {

rotate: 180deg

}	



@media screen and (min-width:64rem){

.nav-ex{
	
display: flex;
overflow:visible;

}

.nav-ex li{
	
flex:1;

	
	}	
	
.nav-ex > li:not(:last-child){
	
border-bottom:unset;
border-right:1px solid rgba(0, 0, 0, 0.14);
	
	}	
	
.nav-ex  li:has(ul) {
	
position: relative;

	
	}
	
.nav-ex li> ul{

position:absolute;
left: 0;
right:0;
top: 100%; 
z-index: 1;
box-shadow:0 10px 10px rgba(0, 0, 0, 0.2);
 
      
}
	
	
	}