show dropdown on click

capsule-prototype/css/left_menu.css

 
-#left_menu * {
+.left_menu * {
 	padding: 2px;
 	margin: 2px;
 }
@@ -21,17 +21,26 @@
 	text-align: center;
 	vertical-align: center;
 }
-.left_menu_item:hover { background: rgba(0,0,0,.1); }
+
+.left_menu_item:hover,  .dropdown_control:checked ~ label { background: rgba(0,0,0,.1); }
 
 .dropdown_content {
 	display: flex;
 	visibility: hidden;
 }
 
-.dropdown:hover .dropdown_content {
+.dropdown_control {
+  display: none;
+}
+
+.dropdown_control:checked ~ .dropdown_content {
 	visibility: visible;
 }
 
+#playback_speed_form {
+  padding: 0;
+}
+
 #playback_speed_form input {
 	display: none;
 }

capsule-prototype/index.html

@@ -202,36 +202,40 @@
 		</div>
 	</div>
 
-	<div id='left_menu' class='flex-col editmode'>
-			<a id='btn_home' class='left_menu_item flex-col' href="javascript:window.app.rekall.Rekall('openUrl', 'home')"><i class="fas fa-home fa-3x left_menu_item_icn"></i>Go back to my capsules</a>
+  <div id='left_menu' class='flex-col editmode left_menu'>
+    <a id='btn_home' class='left_menu_item flex-col' href='javascript:window.app.rekall.Rekall('openUrl', 'home')'><i class='fas fa-home fa-3x left_menu_item_icn'></i>Go back to my capsules</a>
     <div class='flex-col'>
-			<ul class='dropdown btns_add_annotation left_menu_item'>
+      <ul class='btns_add_annotation flex-col'>
+        <input type='checkbox' id='inp_add_annotation_dropdown' class='dropdown_control' />
         <li class='dropdown_content left_menu_item' id='btn_add_note'>note</li>
         <li class='dropdown_content left_menu_item' id='btn_add_link'>link</li>
         <li class='dropdown_content left_menu_item' id='btn_add_paste'>clipboard</li>
         <li class='dropdown_content left_menu_item' id='btn_add_file'>file</li>
-				<i class="fas fa-plus"></i>
+        <label for='inp_add_annotation_dropdown' class='left_menu_item' title='add annotation'><i class='fas fa-plus'></i></label>
       </ul>
-			<form id='playback_speed_form' class='dropdown left_menu_item'>
-				<i class="fas fa-random"></i>
+      <div class='flex-col'>
+        <input type='checkbox' id='inp_playback_rate_dropdown' class='dropdown_control' />
+        <label for ='inp_playback_rate_dropdown' class='left_menu_item' title='change playback rate'><i class='fas fa-play'></i></label>
+        <form id='playback_speed_form' class='dropdown_content flex-col'>
           <input type='radio' id='playback_speed_025' value='0.25' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_025'>0.25</label>
+          <label class='left_menu_item' for='playback_speed_025'>0.25</label>
           <input type='radio' id='playback_speed_05' value='0.5' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_05'>0.5</label>
+          <label class='left_menu_item' for='playback_speed_05'>0.5</label>
           <input type='radio' id='playback_speed_075' value='0.75' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_075'>0.75</label>
+          <label class='left_menu_item' for='playback_speed_075'>0.75</label>
           <input type='radio' id='playback_speed_1' value='1' name='playback_rate' checked />
-				<label class='dropdown_content left_menu_item' for='playback_speed_1'>normal</label>
+          <label class='left_menu_item' for='playback_speed_1'>normal</label>
           <input type='radio' id='playback_speed_125' value='1.25' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_125'>1.25</label>
+          <label class='left_menu_item' for='playback_speed_125'>1.25</label>
           <input type='radio' id='playback_speed_15' value='1.5' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_15'>1.5</label>
+          <label class='left_menu_item' for='playback_speed_15'>1.5</label>
           <input type='radio' id='playback_speed_175' value='1.75' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_175'>1.75</label>
+          <label class='left_menu_item' for='playback_speed_175'>1.75</label>
           <input type='radio' id='playback_speed_2' value='2' name='playback_rate' />
-				<label class='dropdown_content left_menu_item' for='playback_speed_2'>2</label>
+          <label class='left_menu_item' for='playback_speed_2'>2</label>
         </form>
       </div>
+    </div>
     <div class='flex-col'>
       <div id='left_menu_item_preview' class='left_menu_item flex-col'>preview</div>
       <div id='left_menu_item_settings' class='left_menu_item flex-col'>settings</div>