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>