Елемент выплывает под (CSS, Hover). При нажатии кнопки мыши исчезает блок, какбудто я убераю мышку

#center_menu_bar { 
  float: right; 
  width: 1.5%; 
  height: 100%; 
  overflow: hidden; 
} 
 
#center_menu_bar>#center_menu { 
  display: none; 
} 
 
#center_menu_bar:hover>#center_menu { 
  display: inline-block; 
} 
 
#center_menu_bar:hover>img { 
  display: none; 
} 
 
#center_menu_bar:hover { 
  width: 20%; 
  border-left: 1px solid rgba(108, 140, 213, 0.2); 
  background: -moz-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* FF3.6-15 */ 
  background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* Chrome10-25,Safari5.1-6 */ 
  background: radial-gradient(ellipse at center, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4df0f9ff', endColorstr='#4da1dbff', GradientType=1); 
  /* IE6-9 fallback on horizontal gradient */ 
} 
 
#center_menu_bar img { 
  float: left; 
  height: 2%; 
  margin: 260px 0; 
} 
 
#center_menu { 
  width: 98%; 
  float: left; 
} 
 
.center_menu_item { 
  width: 90%; 
  max-height: 14px; 
  margin: 2% auto 0; 
  padding: 2% 3%; 
  overflow: hidden; 
  background: -moz-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* FF3.6-15 */ 
  background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* Chrome10-25,Safari5.1-6 */ 
  background: radial-gradient(ellipse at center, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4df0f9ff', endColorstr='#4da1dbff', GradientType=1); 
  /* IE6-9 fallback on horizontal gradient */ 
} 
 
.center_menu_item:hover { 
  cursor: pointer; 
  border: 1px solid rgba(108, 140, 213, 0.1); 
  border-radius: 2px; 
} 
 
.center_menu_item:hover>.open { 
  background-image: url("../images/icons/view.png"); 
} 
 
.center_menu_item:hover>.close { 
  background-image: url("../images/icons/hide.png"); 
} 
 
.center_menu_item_open { 
  font-size: 14px; 
  width: 90%; 
  margin: 2% auto 0; 
  padding: 2% 3%; 
  background: -moz-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.5) 0%, rgba(203, 235, 255, 0.5) 25%, rgba(161, 219, 255, 0.5) 100%); 
  /* FF3.6-15 */ 
  background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.5) 0%, rgba(203, 235, 255, 0.5) 25%, rgba(161, 219, 255, 0.5) 100%); 
  /* Chrome10-25,Safari5.1-6 */ 
  background: radial-gradient(ellipse at center, rgba(240, 249, 255, 0.5) 0%, rgba(203, 235, 255, 0.5) 25%, rgba(161, 219, 255, 0.5) 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4df0f9ff', endColorstr='#4da1dbff', GradientType=1); 
  /* IE6-9 fallback on horizontal gradient */ 
} 
 
.center_menu_item_open:hover { 
  cursor: pointer; 
  border: 1px solid rgba(108, 140, 213, 0.1); 
  border-radius: 2px; 
} 
 
.open { 
  float: right; 
  width: 18px; 
  height: 18px; 
  margin: -16px 5px 0 0; 
  background-image: url("../images/icons/hide.png"); 
  background-size: cover; 
} 
 
.open:hover { 
  background-image: url("../images/icons/view.png"); 
} 
 
.close { 
  float: right; 
  width: 18px; 
  height: 18px; 
  margin: -16px 5px 0 0; 
  background-image: url("../images/icons/view.png"); 
  background-size: cover; 
} 
 
.close:hover { 
  background-image: url("../images/icons/hide.png"); 
} 
 
.fields_item { 
  width: 86%; 
  margin: 4px auto; 
} 
 
.swich_on { 
  float: left; 
  width: 24px; 
  height: 18px; 
  margin: 0 4% 0 0; 
  background: url("../images/icons/switch.png"); 
  background-size: cover; 
} 
 
.swich_on:hover { 
  float: left; 
  width: 24px; 
  height: 18px; 
  margin: 0% 4% 0 0; 
  background: url(../images/icons/switch-1.png); 
  background-size: cover; 
} 
 
.swich_off { 
  float: left; 
  width: 24px; 
  height: 18px; 
  margin: 0 4% 0 0; 
  background: url("../images/icons/switch-1.png"); 
  background-size: cover; 
} 
 
.swich_off:hover { 
  float: left; 
  width: 24px; 
  height: 18px; 
  margin: 0 4% 0 0; 
  background: url("../images/icons/switch.png"); 
  background-size: cover; 
} 
 
.center_menu_button { 
  float: left; 
  width: 44%; 
  margin: 2% 0 5% 2%; 
  padding: 2% 1.3%; 
  background: -moz-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* FF3.6-15 */ 
  background: -webkit-radial-gradient(center, ellipse cover, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* Chrome10-25,Safari5.1-6 */ 
  background: radial-gradient(ellipse at center, rgba(240, 249, 255, 0.3) 0%, rgba(203, 235, 255, 0.3) 25%, rgba(161, 219, 255, 0.3) 100%); 
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4df0f9ff', endColorstr='#4da1dbff', GradientType=1); 
  /* IE6-9 fallback on horizontal gradient */ 
} 
 
.slidecontainer { 
  width: 100%; 
} 
 
.slider { 
  -webkit-appearance: none; 
  width: 96%; 
  height: 6px; 
  border-radius: 5px; 
  background: #d3d3d3; 
  outline: none; 
  opacity: 0.7; 
  -webkit-transition: .2s; 
  transition: opacity .2s; 
} 
 
.slider:hover { 
  opacity: 1; 
} 
 
.slider::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  background: #412C84; 
  cursor: pointer; 
} 
 
.slider::-moz-range-thumb { 
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
  background: #412C84; 
  cursor: pointer; 
} 
 
#order_summ_multislider {} 
 
@supports (--css: variables) { 
  input[type="range"].multirange { 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
    vertical-align: top; 
  } 
  input[type="range"].multirange.original { 
    margin: 0 0 0 10px; 
  } 
  input[type="range"].multirange.original::-webkit-slider-thumb { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: #412C84; 
    cursor: pointer; 
    position: relative; 
    z-index: 2; 
  } 
  input[type="range"].multirange.original::-moz-range-thumb { 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: #412C84; 
    cursor: pointer; 
    transform: scale(1); 
    /* FF doesn't apply position it seems */ 
    z-index: 1; 
  } 
  input[type="range"].multirange::-moz-range-track { 
    border-color: transparent; 
    /* needed to switch FF to "styleable" control */ 
  } 
  input[type="range"].multirange.ghost { 
    margin: -21px auto 0 40px; 
    position: relative; 
    background: var(--track-background); 
    --track-background: linear-gradient(to right, transparent var(--low), var(--range-color) 0, var(--range-color) var(--high), transparent 0) no-repeat 0 45% / 100% 40%; 
    --range-color: #412C84; 
  } 
  input[type="range"].multirange.ghost::-webkit-slider-runnable-track { 
    background: var(--track-background); 
  } 
  input[type="range"].multirange.ghost::-moz-range-track { 
    background: var(--track-background); 
  } 
} 
 
.center_menu_button:hover { 
  cursor: pointer; 
  background: #412C84; 
  border: 1px solid rgba(108, 140, 213, 0.1); 
  border-radius: 2px; 
}

<div id="center_side" class="side_bar"> 
  <div id="center_menu_bar"> 
    <div id="center_menu"> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Fields</div> 
        <div class="show_hide open"></div> 
 
        <div id="c1" class="fields_item"> 
          <div class="swich_on"></div>c1</div> 
        <div id="c2" class="fields_item"> 
          <div class="swich_on"></div>c2</div> 
        <div id="c3" class="fields_item"> 
          <div class="swich_off"></div>c3</div> 
        <div id="c4" class="fields_item"> 
          <div class="swich_off"></div>c4</div> 
        <div id="c5" class="fields_item"> 
          <div class="swich_on"></div>c5</div> 
        <div id="c6" class="fields_item"> 
          <div class="swich_off"></div>c6</div> 
        <div id="c7" class="fields_item"> 
          <div class="swich_on"></div>c7</div> 
        <div id="c8" class="fields_item"> 
          <div class="swich_on"></div>c8</div> 
        <div id="c9" class="fields_item"> 
          <div class="swich_off"></div>c9</div> 
        <div id="c10" class="fields_item"> 
          <div class="swich_on"></div>c10</div> 
        <div id="c11" class="fields_item"> 
          <div class="swich_on"></div>c11</div> 
        <div id="c12" class="fields_item"> 
          <div class="swich_on"></div>c12</div> 
 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Orders count: <span id="order_count_value"></span></div> 
        <div class="show_hide open"></div> 
        <div class="slidecontainer"><input type="range" min="10" max="1000" value="20" class="slider" id="order_count" step="10" /></div> 
 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Orders filters</div> 
        <div class="show_hide open"></div> 
        <div id="brand"></div> 
        <div id="category"></div> 
        <div id="subcategory"></div> 
        <div id="subcategory2"></div> 
        <div id="subcategory3"></div> 
 
        <div id="order_summ">Order summ: <span id="order_summ_value"></span></div> 
        <div class="swich_on"></div> 
        <input type="range" multiple value="100,1300" min="100" max="1300" step="50" id="order_summ_multislider" /> 
 
 
        <div id="order_average_summ">Order average summ: <span id="order_average_summ_value"></span></div> 
        <div class="swich_off"></div> 
        <input type="range" multiple value="100,1300" min="100" max="1300" step="50" id="order_average_summ_multislider" /> 
 
        <div id="cross_summ">Cross summ: <span id="cross_summ_value"></span></div> 
        <div class="swich_off"></div> 
        <input type="range" multiple value="100,1300" min="100" max="1300" step="50" id="cross_summ_multislider" /> 
 
        <div id="cross_average_summ">Cross average summ: <span id="cross_average_summ_value"></span></div> 
 
        <div class="swich_off"></div> 
        <input type="range" multiple value="100,1300" min="100" max="1300" step="50" id="cross_average_summ_multislider" /> 
 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Date Filters</div> 
        <div class="show_hide open"></div> 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Worker Filters</div> 
        <div class="show_hide open"></div> 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Product Filters</div> 
        <div class="show_hide open"></div> 
      </div> 
      <div class="menu_item center_menu_item"> 
        <div class="center_menu_item_name">Delivery Filters</div> 
        <div class="show_hide open"></div> 
      </div> 
      <div id="search" class="center_menu_button">Search</div> 
      <div id="default" class="center_menu_button">Default filters</div> 
 
    </div> 
    <!--img src="style/images/soft/center_menu_bar_arrow.png" / --> 
    <img src="//picsum.photos/200/300" alt="picsum.photos" title="placeholder picsum.photos"> 
 
  </div> 
  <div id="center_header">Orders from: 00-00-0000 to: 00-00-0000 and with status "xxxxxxx"</div> 
 
 
</div>