Foundation 6 - Dropdown panel - Connected area with button - css

Question

I need to make dropdown menu with connected area without border between button and dropdown-panel, but the borders at the edges of dropdown panel will be preserved. I use dropdown-pane from Foundation 6.
This is my result:
And this is my target:
Below is my HTML code where dropdown-wrapper is container for dropdown toggler and dropdown-panel. data-v-offset is set -1 to overlap border of item-container. I tried to set up the bottom border of item-container to background color, but dropdown-pane instantly overlap the item-container element.
<ul class="bottom-menu">
<li class="dropdown-wrapper" data-toggle="header-shopping-card" >
<a href="#" class="item-container">
<div class="item-content">
<div class="item-title">
<span>Nákupní košík</span>
<span class="box primary"><span>4</span></span>
</div>
<div class="item-subtitle">12 000 Kč</div>
</div>
</a>
<div
class="dropdown-pane"
id="header-shopping-card"
data-dropdown data-hover="true"
data-hover-pane="false"
data-position="bottom"
data-alignment="right"
data-hover-delay=0
data-v-offset=-1
>
Just some junk that needs to be said. Or not. Your choice.
</div>
</li>
</ul>
And this is my SCSS code:
.bottom-menu {
#include menu-base;
#include flex-align(right, middle);
.dropdown-wrapper {
border: 0;
&:hover {
.item-container {
background-color: $light-gray;
border: 1px solid $dark-gray;
border-bottom: 1px solid transparent;
.item-content {
color: $black;
}
.item-subtitle {
color: $dark-gray;
}
}
}
.dropdown-pane {
background-color: $light-gray;
border: 1px solid $dark-gray;
}
}
.dropdown-pane {
font-size: $global-font-size;
}
.item-container {
transition-delay: 0;
display: flex;
align-items: flex-end;
font-size: $small-font-size;
border: 1px solid transparent;
.item-icon {
width: rem-calc(35px);
height: auto;
color: $accent-secondary;
.item-icon-path {
fill: $accent-secondary;
}
.item-icon-path-circle {
fill: $green;
}
.item-icon-path-check {
fill: $header-primary-color;
}
}
.item-content {
padding-left: 6px;
color: $header-primary-color;
font-size: rem-calc(12px);
.item-title {
margin-bottom: 4px;
}
.item-subtitle {
line-height: 1em;
color: $header-secondary-color;
}
.box {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: rem-calc(21px);
min-height: rem-calc(21px);
color: $white;
font-size: rem-calc(13px);
}
.box.primary {
background-color: $primary-color;
}
}
}
}
}
}
}
I don't know hot to remove border between dropdown-pane and item-container. Can you please help me? I'll be glad for every help.
Thank you,
Michal

Answer 1

.item-container must have position: relative and .dropdown-pane must have position: absolute. After that the z-index is working. Then Bottom border of the .item-container is overlapped by:
.item-container:after {
content: '';
background-color: $light-gray;
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
}