Scroll hover problem

Navigation
4

When I move the mouse button and see the content I can not use the scroll bar, it simply hides the content, can anyone help? 

ul>li {
  list-style-type: none;
}

ul li:hover .mostrar {
  opacity: 1;
  height: 150px;
  overflow: auto;
}

.mostrar {
  background: #CCC;
  height: 15px;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  opacity: 0;
  height: 15px;
  font-size: 13px;
  overflow: hidden;
}

.conteudo-meio {
  width: 370px;
  position: absolute;
  left: 20px;
  z-index: 999999;
}
<ul>
  <li>
    <section class="conteudo-meio">
      <a href="#">Passar o mouse no menu</a>
      <div class="mostrar">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
        <p>Item 6</p>
        <p>Item 7</p>
        <p>Item 8</p>
      </div>
    </section>
  </li>
</ul>
    
asked by anonymous 17.03.2017 / 20:25

1 answer

2

I ran several tests and div continued to fade, until I customized the scroll bar and worked as expected. So since the problem is only in chrome, you can use a% custom%, there are several ways to detect if the browser is chrome , follow an example of scrollbar , customizing it scrollbar do not add. 

ul>li {
  list-style-type: none;
}

ul li:hover .mostrar {
  opacity: 1;
  height: 150px;
  overflow: auto;
}

.mostrar {
  background: #CCC;
  height: 15px;
  overflow: hidden;
  position: relative;
  margin-top: 0px;
  opacity: 0;
  height: 15px;
  font-size: 13px;
  overflow: hidden;
}

.conteudo-meio {
  width: 370px;
  position: absolute;
  left: 20px;
  z-index: 999999;
}


/* Let's get this party started */

::-webkit-scrollbar {
  width: 12px;
}


/* Track */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}
<ul>
  <li>
    <section class="conteudo-meio">
      <a href="#">Passar o mouse no menu</a>
      <div class="mostrar">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
        <p>Item 6</p>
        <p>Item 7</p>
        <p>Item 8</p>
      </div>
    </section>
  </li>
</ul>
    
17.03.2017 / 21:01
Write in Rectangle - HTML Canvas Format @ Html.Label - MVC