Сделать неактивными соседние области у кнопки-гамбургера при наведении курсора

Question

Нужно навести только на блок с 3 полосками, для того чтобы выехала панелька. На фото показано синим что нужно убрать, так как при наведении на эти области, панель тоже выезжает. Как решить проблему?

Код

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none
}
.block{
    max-width: 280px;
    width: 200px;
    height: 100px;
    text-align: center;
    position: fixed;
    opacity: 0.4;
    transition: 0.5s;
    margin-top: -100px; 
    margin-left: calc(50% - 100px);
}

.block:hover{
    opacity: 1;
    margin-top: 0px;
}
.block{
    height: 100px;
}
.block nav{
    width: 200px;
}
.block ul{
    height: 100px;
    width: 200px;
    margin: 0px;
    padding: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #222222
}

.block nav ul li{
    background: transparent;
    list-style-type: none;
    float: left;
    height: 30px;
    width: 100%;
    padding-top: 0px;

    font-size: 20px;
}
.block nav ul li a{
    color: #9B9D9E;
}

<div class="block">
    <nav>
      <ul>
        <li><a href="#">Текст 1</a></li>
        <li><a href="#">Текст 2</a></li>
        <li><a href="#">Текст 3</a></li>
      </ul>
    </nav>
  <svg width="52" height="32" xmlns="http://www.w3.org/2000/svg">
    <g><rect fill="none" id="canvas_background" height="34" width="54" y="-1" x="-1" /><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" /></g></g><g><rect stroke="#212529" id="svg_12" height="5.55318" width="50" y="0.75" x="1" stroke-width="1.5" fill="#212529" /><rect stroke="#212529" rx="6" id="svg_1" height="30.4375" width="50.05912" y="0.75" x="0.97044" stroke-width="1.5" fill="#212529" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_5" y2="8.4769" x2="40.68806" y1="8.4769" x1="11.31194" stroke-width="1.5" fill="none" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_6" y2="15.1522" x2="40.68806" y1="15.1522" x1="11.31194" stroke-width="1.5" fill="none" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_7" y2="21.83041" x2="40.68806" y1="21.83041" x1="11.31194" stroke-width="1.5" fill="none" /></g>
  </svg>     
</div>

Answer 1

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none
}

.block {
  max-width: 280px;
  width: 200px;
  height: 100px;
  text-align: center;
  position: fixed;
  opacity: 0.4;
  transition: 0.5s;
  margin-top: -100px;
  margin-left: calc(50% - 100px);
}

.block:hover {
  opacity: 1;
  margin-top: 0px;
}

.block nav {
  width: 200px;
}

.block ul {
  height: 100px;
  width: 200px;
  margin: 0px;
  padding: 0;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #222222
}

.block nav ul li {
  background: transparent;
  list-style-type: none;
  float: left;
  height: 30px;
  width: 100%;
  padding-top: 0px;
  font-size: 20px;
}

.block nav ul li a {
  color: #9B9D9E;
}

.block svg {
  width: 52px;
  height: 32px;
  margin: 0 auto;
  position: absolute;
  bottom: -32px;
  left: calc(50% - 24px);
}

<div class="block">
  <nav>
    <ul>
      <li><a href="#">Текст 1</a></li>
      <li><a href="#">Текст 2</a></li>
      <li><a href="#">Текст 3</a></li>
    </ul>
  </nav>
  <svg width="52" height="32" xmlns="http://www.w3.org/2000/svg">
    <g><rect fill="none" id="canvas_background" height="34" width="54" y="-1" x="-1" /><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" /></g></g><g><rect stroke="#212529" id="svg_12" height="5.55318" width="50" y="0.75" x="1" stroke-width="1.5" fill="#212529" /><rect stroke="#212529" rx="6" id="svg_1" height="30.4375" width="50.05912" y="0.75" x="0.97044" stroke-width="1.5" fill="#212529" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_5" y2="8.4769" x2="40.68806" y1="8.4769" x1="11.31194" stroke-width="1.5" fill="none" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_6" y2="15.1522" x2="40.68806" y1="15.1522" x1="11.31194" stroke-width="1.5" fill="none" /><line stroke="#ffffff" stroke-linecap="null" stroke-linejoin="null" id="svg_7" y2="21.83041" x2="40.68806" y1="21.83041" x1="11.31194" stroke-width="1.5" fill="none" /></g>
  </svg>
</div>

БЛОГ НА HUSL

Сделать неактивными соседние области у кнопки-гамбургера при наведении курсора

Ответы (1 шт):