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;