Question

0

141

Views

Controlling Overflow of Fixed Positioned Div

Trying to show items out of fixed positioned div. As shown in the picture half of the menu items are hidden inside the div. The vertical overflow is set to scroll but the horizontal overflow is set to visible but no items are visible outside the box.

I am not sure if this is even possible?

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 ...

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-30T07:44:34.800Z

emphasized text

is that what you want? Try not to use overflow and height to him

And the code here:

#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>

0

141

Controlling Overflow of Fixed Positioned Div

1 answers

0

Find remote jobs

Andres GPT