0
143
VistasControl de desbordamiento de división de posición fija
Intentando mostrar elementos fuera de div de posición fija. Como se muestra en la imagen, la mitad de los elementos del menú están ocultos dentro del div. El desbordamiento vertical está configurado para scroll , pero el desbordamiento horizontal está configurado como visible , pero no hay elementos visibles fuera del cuadro.
No estoy seguro de si esto es incluso posible?
body { background: #fefe } .bg-menu-container { background: black } .bg-menu-container { height: 140px; width: 200px; position: relative;} .bg-menu-container ul li a { display: inline-block padding: 10px 10px background: #dee } .bg-menu-container { overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; overflow-x: visible;} ::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; } .bg-menu-container .sub-menu { display: none; position: absolute; left: 140px; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .bg-menu-container ul li:hover .sub-menu { display: block; } <div class="bg-menu-container"> <ul> <li><a href="#"> Home 00 </a><ul class="sub-menu"> <li><a href="#"> Sub-Home 00 </a></li> <li><a href="#"> Sub-Home 01 </a></li> <li><a href="#"> Sub-Home 02 </a></li> <li><a href="#"> Sub-Home 03 </a></li> </ul></li> <li><a href="#"> Home 01 </a></li> <li><a href="#"> Home 02 </a></li> <li><a href="#"> Home 03 </a><ul class="sub-menu"> <li><a href="#"> Sub-Home 00 </a></li> <li><a href="#"> Sub-Home 01 </a></li> <li><a href="#"> Sub-Home 02 </a></li> <li><a href="#"> Sub-Home 03 </a></li> </ul></li> </ul> </div> Please scroll ...
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
texto enfatizado 
¿Es eso lo que quieres? Trate de no usar desbordamiento y altura para él
Y el código aquí:
#myBody { background: #fefe } .bg-menu-container { background: black } .bg-menu-container { /* height: 140px; */ width: 200px; position: relative; top: 0; left: 0; /* overflow-y: scroll; */ } .bg-menu-container ul li a { display: inline-block; padding: 10px 10px; background: #dee; } ::-webkit-scrollbar { /* WebKit */ width: 0; height: 0; } .bg-menu-container .sub-menu { display: none; position: absolute; left: 140px; background-color: #ffffff; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .bg-menu-container ul li:hover .sub-menu { display: block; } <template> <div id="myBody"> <div class="bg-menu-container"> <ul> <li><a href="#"> Home 00 </a><ul class="sub-menu"> <li><a href="#"> Sub-Home 00 </a></li> <li><a href="#"> Sub-Home 01 </a></li> <li><a href="#"> Sub-Home 02 </a></li> <li><a href="#"> Sub-Home 03 </a></li> </ul></li> <li><a href="#"> Home 01 </a></li> <li><a href="#"> Home 02 </a></li> <li><a href="#"> Home 03 </a><ul class="sub-menu"> <li><a href="#"> Sub-Home 00 </a></li> <li><a href="#"> Sub-Home 01 </a></li> <li><a href="#"> Sub-Home 02 </a></li> <li><a href="#"> Sub-Home 03 </a></li> </ul></li> </ul> </div> </div> </template>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta