How do I arrange div dropdown behind other div so part of dropdown border gets covered?

Question

I'm building a simple dropdown menu for an avatar. The problem I'm having is that I want the dropdown menu to cover a portion of the avatar's border, so it looks more seamless. Here's what I mean.

Before

After

I probably built my HTML/CSS incorrectly, but I tried adding z-indexes, but it never changed anything. I'm basically trying to make the dropdown menu go behind the avatar button, and set the avatar's bottom border as none, so it looks seamless.

Any ideas what I could do differently?

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

the HTML should look like this:

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

and fixed :)