如何在其他div后面安排div下拉，以便覆盖下拉边界的一部分？

Question

我正在为头像构建一个简单的下拉菜单。我遇到的问题是我希望下拉菜单覆盖化身边框的一部分，因此看起来更加无缝。这就是我的意思。

之前

后

我可能错误地构建了我的HTML / CSS，但我尝试添加z-index，但它从未改变任何东西。我基本上试图让下拉菜单落在头像按钮后面，并将头像的底部边框设置为无边框，因此看起来无缝。

我能做些什么不同的想法？

HTML

<div class="user">
    <div class="avatar">
        <img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image">
        <img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow">
        <div class="dropdown">
            <div class="wrap">
                <p>Test</p>
            </div>
        </div>
    </div>
</div>

CSS

header .user { position:relative; width:37%; padding:0 10px 0 0; height:100%; float:left; text-align:right; }
header .avatar { position:relative; display:inline-block; width:70px; height:50px; margin:19px 0 0 0; text-align:left; vertical-align:middle; border:1px solid transparent; }
header .avatar img.image { vertical-align:-30px; margin:0 5px 0 10px; }
header .avatar img.arrow { vertical-align:-18px; }
header .avatar:hover { background:#fff; border:1px solid #dcdcdc; border-bottom:none; }
header .avatar:hover .dropdown { display:block; }
header .avatar .dropdown { position:absolute; top:50px; left:-231px; display:none; width:300px; height:200px; background:#fff; border:1px solid #dcdcdc; }
header .avatar .dropdown .wrap { padding:20px; }
header .avatar .dropdown p { margin:0; }

Answer 1

HTML应如下所示：

<div class="user">
    <div class="avatar">
        <img src="<?php echo base_url(); ?>assets/img/avatars/don.jpg" class="image">
        <img src="<?php echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow">
    </div>
    <div class="dropdown">
        <div class="wrap">
            <p>Test</p>
        </div>
    </div>
</div>

CSS

.avatar{ border-bottom: 0; z-index: 10:}
.dropdown{z-index:9}

并修复：）

Answer 2

将“avatar”放入“下拉列表”并使用否定margin-top。

Answer 3

在您的下拉列表中的'头像'和 border-bottom-style:none; 上尝试 border-top-style:none;，或者只是否定 margin-top。