我正在为头像构建一个简单的下拉菜单。我遇到的问题是我想让下拉菜单覆盖头像边框的一部分,这样看起来更无缝。这就是我的意思。
之前
之后
我可能错误地构建了我的 HTML/CSS,但我尝试添加 z-indexes,但它没有改变任何东西。我基本上是在尝试让下拉菜单位于头像按钮的后面,并将头像的底部边框设置为无边框,这样看起来就无缝了。
我有什么不同的想法吗?
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; }
最佳答案
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}
并修复:)
关于html - 如何将 div 下拉菜单安排在其他 div 后面,以便覆盖部分下拉边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8363002/