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);
}
}