Menu
I am making a item container which have many item boxes in there, when I hover the item, it will have a drop-down table for item-informations.
The problem here is that I when I set the container to overflow:auto (so that I can store as many boxes as I want) then when I hover at the box, the drop down will be cut-off in a very ridiculous way. What i want is that the dropDown will be all visible, you guys have any trick to make this?
.parent{
overflow-y:auto;
background-color: blue;
width: 500px;
height: 100px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="parent">
<div class="dropdown">
<button class="dropbtn">Item1</button>
<div class="dropdown-content">
<p>Info 1</p>
<p>Info 2</p>
<p>Info 3</p>
</div>
</div>
</div>
</body>
</html>
580
asked Jul 29 '26 23:07
Try this:
.parent{
overflow-y:auto;
background-color: blue;
width: 500px;
height: 100px;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropDownContainer {
display:block;
width: 100px;
height: 70px;
float: left;
position: static;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="parent">
<div class="dropDownContainer">
<div class="dropdown">
<button class="dropbtn">Item1</button>
<div class="dropdown-content">
<p>Info 1</p>
<p>Info 2</p>
<p>Info 3</p>
</div>
</div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
