他のdivの後ろにdivドロップダウンを配置するにはどうしたらいいですか？

Question

私はアバターのための簡単なドロップダウンメニューを構築しています。私が持っている問題は、ドロップダウンメニューでアバターの境界の一部をカバーするようにしたいので、よりシームレスに見えます。ここに私が意味するものがあります。

は

前

後、私はおそらく間違って私のHTML/CSSを建てたが、私は、zインデックスを追加しようとしたが、それは何も変更されません。私は基本的に、ドロップダウンメニューをアバターボタンの背後に移動させ、アバターの下端をnoneに設定しようとしているので、シームレスに見えます。

私は異なったやり方を考えていますか？

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

「アバター」とあなたのドロップダウンにborder-top-style:none;、または単に負margin-topにborder-bottom-style:none;を試してみてください。

Answer 2

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 3

入れ、 "アバター" "ドロップダウン" と否定margin-topを使用して内部。