CODEWITHSUNDEEP
htmlcssdrop-down-menu
dallen
dallen

Reputation: 2651

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

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

Before

After

enter image description here

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

Upvotes: 5

Views: 637

Answers (3)

SemicolonExpected
SemicolonExpected

Reputation: 614

Try border-bottom-style:none; on the 'avatar" and border-top-style:none; on your drop-down,or just a negative margin-top.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Put "avatar" inside "dropdown" and use a negative margin-top.

Upvotes: 0

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25247

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 :)

Upvotes: 4

Related Questions