我正在为化身构建一个简单的下拉菜单.我遇到的问题是我希望下拉菜单覆盖化身边框的一部分,因此看起来更加无缝.这就是我的意思.
之前
后
我可能错误地构建了我的HTML / CSS,但我尝试添加z-index,但它从未改变任何东西.我基本上试图将下拉菜单放在头像按钮后面,并将头像的底部边框设置为无,因此它看起来无缝.
任何想法我可以做的不同？
HTML
PHP echo base_url(); ?>assets/img/avatars/don.jpg" class="image">
PHP echo base_url(); ?>assets/img/header-arrow-inactive.png" class="arrow">
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; }
最佳答案
尝试border-bottom-style：none;在’avatar’和border-top-style：none;在您的下拉列表中,或者只是一个负边距顶部.
原文链接：https://www.f2er.com/html/425808.html
