diff --git a/srcs/plugins/map_prof/scripts/mp_create_filters.js b/srcs/plugins/map_prof/scripts/mp_create_filters.js
index bbc355e..c5bfc77 100644
--- a/srcs/plugins/map_prof/scripts/mp_create_filters.js
+++ b/srcs/plugins/map_prof/scripts/mp_create_filters.js
@@ -39,12 +39,18 @@ function fill_filters(filters_div) {
 	let content = "";
 	let keys = Object.keys(filters);
 	keys.forEach((key) => {
+		//content += `
+		//	<div class="filter_menu">
+		//		<input  id="filter_menu_title_${key}" class="filter_menu_title" type="checkbox">
+		//		<label for="filter_menu_title_${key}" class="filter_menu_title"><p>${key}</p></label>
+		//		<div class="filter_menu_drop">
+		//`;
 		content += `
 			<div class="filter_menu">
-				<div class="filter_menu_title">
+				<div class="filter_menu_title" tabindex=0>
 					<p>${key}</p>
 				</div>
-				<div class="filter_menu_drop">
+				<div class="filter_menu_drop" tabindex=0>
 		`;
 		for (value of filters[key]) {
 			content += `
diff --git a/srcs/plugins/map_prof/styles/mp_filters.css b/srcs/plugins/map_prof/styles/mp_filters.css
index 6b4b233..e8fe0ce 100644
--- a/srcs/plugins/map_prof/styles/mp_filters.css
+++ b/srcs/plugins/map_prof/styles/mp_filters.css
@@ -4,9 +4,15 @@
  */
 
 
-#ljdp_map_filters {
+#ljdp_map_filters,
+#ljdp_map_filters * {
 	display: flex;
 	flex-direction: row;
+	position: relative;
+	margin: auto;
+}
+
+#ljdp_map_filters {
 	position: relative;
 	border: 1px solid red;
 	width: 100%;
@@ -14,45 +20,74 @@
 }
 
 #ljdp_map_filters .filter_menu {
-	display: flex;
 	flex-direction: column;
-	position: relative;
-	margin: auto;
 	width: 100%;
 	border: 1px solid blue;
 }
 
-#ljdp_map_filters .filter_menu:hover .filter_menu_drop {
-	display: flex;
+/*
+#ljdp_map_filters .filter_menu input.filter_menu_title {
+	display: none;
 }
 
+#ljdp_map_filters .filter_menu label.filter_menu_title {
+	width: 100%;
+	border: 1px solid green;
+}
+*/
+
 #ljdp_map_filters .filter_menu .filter_menu_title {
-	display: flex;
-	position: relative;
-	margin: auto;
-	width: auto;
+	width: 100%;
+	cursor: pointer;
 	border: 1px solid green;
 }
 
 #ljdp_map_filters .filter_menu .filter_menu_drop {
+	/*
 	display: none;
+	*/
 	flex-direction: column;
 	position: absolute;
-	top: 100%;
+	top: 0%;
 	left: 0px;
-	margin: auto;
-	padding: 10px 0px;
+	margin: 0px;
 	width: 100%;
 	max-height: 400px;
-	overflow-y: scroll;
-	background-color: white;
+	cursor: pointer;
 	border: 1px solid pink;
+	/* padding-top must be sufficient to hide the menu */
+	padding: 100px 0px 0px 0px;
+	height: 0px;
+	background-color: transparent;
+	overflow: hidden;
+	border: none;
+	/*
+	overflow: visible;
+	*/
+}
+
+/*
+#ljdp_map_filters .filter_menu input.filter_menu_title:checked
+~ .filter_menu_drop {
+	display: flex;
+}
+*/
+
+#ljdp_map_filters .filter_menu .filter_menu_drop:focus {
+	top: 100%;
+	background-color: #ffffff;
+	overflow: scroll;
+	height: auto;
+	padding: 10px 0px;
 }
 
 #ljdp_map_filters .filter_menu .filter_menu_drop p {
-	display: flex;
-	position: relative;
 	margin: 0px auto 0px 0px;
 	padding: 0px 10px;
+	width: 100%;
+}
+
+#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
+	background-color: #dddddd;
 }