Remove the hover on the combo : now you have to click to open/close it. Select an item also close the combo.

sandbox/index.css

@@ -271,6 +271,8 @@ a {
     z-index: 1;
     min-width: 135px;
     width: 200px;
+    flex-direction: column;
+    transition: all 0.3s ease; /* Add transition for hover effects */
 }
 
 #dropdownContent a,
@@ -278,12 +280,6 @@ a {
     cursor: pointer;
 }
 
-.dropdown:hover #dropdownContent {
-    display: flex;
-    flex-direction: column;
-    transition: all 0.3s ease; /* Add transition for hover effects */
-}
-
 #chevronUp {
     display: inline;
     margin-right: 0px;
@@ -295,13 +291,6 @@ a {
     margin-left: 0px;
 }
 
-.dropdown:hover #chevronUp {
-    display: none;
-}
-.dropdown:hover #chevronDown {
-    display: inline;
-}
-
 #playBtn.play #pauseImg,
 #playBtn.pause #playImg{
     display: none;

sandbox/index.js

@@ -9,6 +9,9 @@ var currentGroupIndex;
 var currentScene;
 // html balise
 var animationBar = document.getElementById("animationBar");
+var dropdownBtn = document.getElementById("dropdownBtn");
+var chevronUp = document.getElementById("chevronUp");
+var chevronDown = document.getElementById("chevronDown");
 var dropdownLabel = document.getElementById("dropdownLabel");
 var dropdownContent = document.getElementById("dropdownContent");
 var playBtn = document.getElementById("playBtn");
@@ -326,6 +329,27 @@ function formatId(name){
     return "data-" + name.replace(/\s/g,'');
 }
 
+function displayDropdownContent(display) {
+    if(display) {
+        dropdownContent.style.display = "flex";
+        chevronDown.style.display = "inline";
+        chevronUp.style.display = "none";
+    }
+    else {
+        dropdownContent.style.display = "none";
+        chevronDown.style.display = "none";
+        chevronUp.style.display = "inline";
+    }
+}
+dropdownBtn.addEventListener("click", function() {
+    if(dropdownContent.style.display === "flex") {
+        displayDropdownContent(false);
+    }
+    else {
+        displayDropdownContent(true);
+    }
+});
+
 function createDropdownLink(group,index) {
     var animation = document.createElement("a");
     animation.innerHTML = group.name;
@@ -348,8 +372,11 @@ function createDropdownLink(group,index) {
         // set the slider
         slider.setAttribute("min", currentGroup.from);
         slider.setAttribute("max", currentGroup.to);
-        currentSliderValue = 0;
-        slider.value = 0;
+        currentSliderValue = currentGroup.from;
+        slider.value = currentGroup.from;
+
+        // hide the content of the dropdown
+        displayDropdownContent(false);
     });
     dropdownContent.appendChild(animation);
 }