I'm facing a challenge in developing a dropdown feature. The issue arises when I attempt to display an absolutely positioned container of items upon hovering, as the shadow from this container overlaps with the dropdown itself. Here's a simulation of the problem:
body {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.dropdown {
position: relative;
width: 200px;
height: 40px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #efefef;
}
.items {
display: none;
position: absolute;
overflow: hidden;
overflow-y: auto;
width: 100%;
height: 100px;
top: 100%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
background-color: #f7f7f7;
}
.dropdown:hover .items {
display: block;
}
.item {
padding: 5px 10px;
}<div class="dropdown">
<div class="items">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">c</div>
<div class="item">d</div>
</div>
</div>
<div>hello</div>Upon hovering over the dropdown, you'll notice the top part of the shadow from the .items container obscuring the view. Here's an illustrative example of the issue:
https://i.sstatic.net/GtI3y.png
It seems like restricting the box shadow to solely the dropdown is the obvious fix, but this poses a challenge when the items container is set to position absolute, thereby not receiving the box shadow effect.
Any suggestions on how to overcome this obstacle?