Если ограничена высота списка и установлено overflow:scroll
, тень обрезается снизу и сверху всего списка и у каждого элемента справа и слева
https://codepen.io/JuliaGinkul/pen/XWEQBGP
.Container {
position: relative;
}
.Select {
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
min-width: 160px;
width: 249px;
display: inline-block;
vertical-align: middle;
z-index: 1;
}
.Menu {
border: 1px solid gray;
list-style-type: none;
padding-left: 0;
border-radius: 4.44px;
margin: 0;
max-height: 128px;
overflow-y: scroll;
}
.Item {
font-weight: 400;
font-size: 14px;
color: grey;
padding: 7px 10px;
border-bottom: 1px solid #000;
cursor: pointer;
display: flex;
align-items: center;
}
.Item:last-child {
border-bottom: 0;
}
.Item:hover {
box-shadow: 0 0 0 3px blue;
color: #000;
border-radius: 4.44px;
}
<div class="Container">
<div class="Select">
<ul class="Menu">
<li class="Item">пункт 1</li>
<li class="Item">пункт 2</li>
<li class="Item">пункт 3</li>
<li class="Item">пункт 4</li>
<li class="Item">пункт 5</li>
<li class="Item">пункт 6</li>
<li class="Item">пункт 7</li>
</ul>
</div>
</div>