menu animation

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5823,26 +5823,33 @@ svg.ext {
   color: rgb(0, 158, 227);
 }
 #header-top .region-header-top-left ul ul {
+  position: absolute;
+  left: -28%;
+  z-index: 1000;
   display: flex;
   flex-direction: column;
-  display: none;
-  min-width: 100px;
-  width: 100%;
+  min-width: 210px;
+  width: fit-content;
   justify-content: space-between;
   padding-inline-start: 0px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 #header-top .region-header-top-left ul ul .is-active {
   color: rgb(0, 158, 227);
 }
 #header-top .region-header-top-left ul li {
+  position: relative;
   display: flex;
   flex-direction: column;
   background-color: rgb(255, 255, 255);
   padding-bottom: 0.8rem;
   max-width: inherit;
-  width: 25%;
-  align-items: center;
-  height: 20px;
+  padding-left: 1rem;
+  padding-right: 0.5rem;
+  height: fit-content;
 }
 #header-top .region-header-top-left ul li a {
   color: rgb(0, 0, 0);
@@ -5854,7 +5861,9 @@ svg.ext {
   color: rgb(0, 158, 227);
 }
 #header-top .region-header-top-left ul li:hover ul {
-  display: block;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
 }
 #header-top .region-header-top-left ul .ul1.sous-liste.ul2 {
   padding-left: 1rem;

web/themes/custom/eql/scss/partials/_header.scss

@@ -81,8 +81,6 @@
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            // padding-left: 3rem;
-            // margin-right: 20px;
             width: 100%;
             padding-inline-start: 0px;
             padding: 1rem;
@@ -90,36 +88,35 @@
                 color:$blue-light;
             }
             ul{
+                position: absolute;
+                left: -28%;
+                z-index: 1000;
+                // display: none;
                 display: flex;
                 flex-direction: column;
-                display: none;
-                min-width: 100px;
-                width: 100%;
+                min-width: 210px;
+                width: fit-content;
                 justify-content: space-between;
-                // background:$white;
-                // padding-inline-start: 0;
                 padding-inline-start: 0px;
-            
                 .is-active{
                     color:$blue-light;
                 }
+                opacity: 0;
+                visibility: hidden;
+                transform: translateY(-10px);
+                transition: opacity 0.3s ease, transform 0.3s ease;
             }
+
             li{
+                position: relative;
                 display: flex;
                 flex-direction: column;
-                // justify-content: space-between;
                 background-color: $white;
                 padding-bottom: 0.8rem;
                 max-width: inherit;
-                width: 25%;
-                align-items: center;
-                // padding-left: 1rem;
-                height: 20px;
-                // text-align: none
-           
-                // .menuOpen{
-                //     display: flex;
-                // }
+                padding-left: 1rem;
+                padding-right: 0.5rem;
+                height: fit-content;
                 a {
                     color: $black;
                 }
@@ -132,12 +129,13 @@
             }
 
             li:hover ul {
-                display: block;
+                opacity: 1;
+                visibility: visible;
+                transform: translateY(0);
             }
         
             .ul1.sous-liste.ul2{
                 padding-left: 1rem;
-                // width: 200px;
             }
         }