Menu
I am trying to make a scrollable dropdown menu using HTML and CSS. However, when you hover over the scroll bar the menu disappears. I have been trying to solve this issue for a while without results. I'm guessing it has something to do with the CSS. Any thoughts?
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
height: auto;
max-height: 200px;
overflow-x: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>
521
Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
This can happen if you add a width of 100vw to page content, meaning it automatically makes up 100% of the width of the viewport plus the width of the scrollbar. Be sure to note, however, the scrollbar is always visible to indicate that the content is outside or below the height of the viewport.
Create A Dropdown SidebarUse any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. We will use the same styling for all links inside the sidenav.
On the worksheet where you applied the drop-down list, select a cell that has the drop-down list. Go to Data > Data Validation. On the Settings tab, click in the Source box, and then change your list items as needed. Each item should be separated by a comma, with no spaces in between like this: Yes,No,Maybe.
While I can't offer a clear explanation on why the posted code does not work cross browser (I wasn't able to find any browser/OS combo where it fails), I believe it could be improved.
display with transform as a state changing property (explanation below);width instead of max-width on .dropdown-content;height: auto (it's bloat);margin-bottom to it, for when it touches <body>s bottom, so the box-shadow doesn't get cut.:hover, :active and :focus on both .dropdown and .dropdown-content that would keep the dropdown open. This will also greatly improve usability on touch based devices.Besides not being mobile friendly (there's no :hover on touch devices), the current solution suffers on devices which feature narrow or very narrow scrollbars, because when the pointer leaves the element by only 1px, the dropdown is gone.
And that, from where I see it, is a major usability problem. In order to fix it, I propose a short delay in which the pointer could re-enter the element and re-activate the :hover state, without the dropdown being closed. In the code below I used a delay of .6s, for exemplification, which is way too much - a good (natural) value would sit between .3s and .4s - adjust it to your liking.
Contrary to popular belief, this can be achieved without using JavaScript if, instead of using display to switch the states of the dropdown, one would use an animatable property, such as transform and would also use the very handy transition-delay property.
The principle:
.dropdown-content {
transform: scale(0);
transition: transform .0s linear .6s;
}
.dropdown:hover .dropdown-content {
transform: scale(1);
transition-delay: .0s;
}
The example:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
transform: scale(0);
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
width: 160px;
z-index: 1;
max-height: 200px;
margin-bottom: 24x;
overflow-x: hidden;
transition: transform .0s linear .6s;
}
.dropdown:hover>.dropdown-content,
.dropdown:active>.dropdown-content,
.dropdown:focus>.dropdown-content,
.dropdown>.dropdown-content:hover,
.dropdown>.dropdown-content:active,
.dropdown>.dropdown-content:focus {
transform: scale(1);
transition-delay: .0s;
}<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
</div>Another net (and neat) advantage of this method is one could also animate the opening and closing of the dropdown, which is not possible when using display.
164
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
