Foundation 6 - 下拉面板 - 带按钮

Question

我需要在连接区域下拉菜单，按钮和下拉菜单之间没有边框，但下拉菜单边缘的边框将被保留。我使用了基金会6的下拉窗格。

这是我的结果：

这是我的目标：

下面是我的HTML代码，其中dropdown-wrapper是dropdown toggler和dropdown-panel的容器。 data-v-offset设置为-1以重叠item-container的边框。我尝试将item-container的下边框设置为背景颜色，但是下拉窗格立即与item-container元素重叠。

<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>

这是我的SCSS代码：

.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;
                            }
                        }
                    }
                }
            }
        }
    }

我不知道如何删除下拉窗格和项目容器之间的边框。你能帮我么？我很乐意为你提供一切帮助。

谢谢你， 米甲

Answer 1

func必须.item-container且position: relative必须.dropdown-pane。之后position: absolute正在运作。然后z-index的底部边框重叠：

.item-container