Votre navigateur ne supporte pas cette démonstration
<ul class="lava-menu">
<li><a class=lava-lien href="#">Accueil</a></li>
<li><a class=lava-lien href="#">Rubrique 1</a></li>
<li><a class=lava-lien href="#">Rubrique 2</a></li>
<li><a class=lava-lien href="#">Rubrique 3</a></li>
<li><a class=lava-lien href="#">Rubrique 4</a></li>
</ul>
*,
*::before,
*::after{
box-sizing: border-box
}
:root{
--padding: 1rem;
--transition: 0.2s;
}
.lava-menu {
position: relative;
display: flex;
flex-wrap: wrap;
min-height: 3em;
place-content: center;
margin:0;
padding:0;
list-style-type: none;
anchor-name: --lava;
--active:--lava ;
}
.lava-menu::before {
content: "";
z-index: -1;
position: absolute;
top: anchor(var(--active) top);
bottom: anchor(var(--active) bottom);
left: calc(anchor(var(--active) left));
right: calc(anchor(var(--active) right));
background-color: rgba(103, 83, 234, 0.2);
border-radius: .25em;
transition: all .2s;
}
.lava-menu:not(:has(.lava-lien:is(:hover, :focus-visible)))::before {
left:auto;
right:auto;
scale:0;
opacity: 0;
visibility: hidden;
}
.lava-menu li:nth-child(1) {--lava-menu: --rubrique-1 }
.lava-menu li:nth-child(2) { --lava-menu: --rubrique-2 }
.lava-menu li:nth-child(3) {--lava-menu: --rubrique-3}
.lava-menu li:nth-child(4) { --lava-menu: --rubrique-4 }
.lava-menu li:nth-child(5) { --lava-menu: --rubrique-5 }
.lava-menu a {
display:inline-flex;
font-size: 1.25rem;
color: #6753ea;
text-decoration: none;
padding: calc(var(--padding)/2) var(--padding);
anchor-name: var(--lava-menu);
}
.lava-menu:has(:nth-child(1) > .lava-lien:is(:hover, :focus-visible)) {
--active: --rubrique-1;
}
.lava-menu:has(:nth-child(2) > .lava-lien:is(:hover, :focus-visible)) {
--active: --rubrique-2;
}
.lava-menu:has(:nth-child(3) > .lava-lien:is(:hover, :focus-visible)) {
--active: --rubrique-3;
}
.lava-menu:has(:nth-child(4) > .lava-lien:is(:hover, :focus-visible)) {
--active: --rubrique-4;
}
.lava-menu:has(:nth-child(5) > .lava-lien:is(:hover, :focus-visible)) {
--active: --rubrique-5;
}