¿Cómo organizo el menú desplegable de div detrás de otro div para que se cubra parte del borde desplegable?

Estoy construyendo un menú desplegable simple para un avatar. El problema que tengo es que quiero que el menú desplegable cubra una parte del borde del avatar, por lo que se ve más perfecto. Esto es lo que quiero decir.¿Cómo organizo el menú desplegable de div detrás de otro div para que se cubra parte del borde desplegable?

Antes

Before

Después

enter image description here

probablemente construido mi HTML/CSS de forma incorrecta, pero he intentado añadir índices de z, pero nunca ha cambiado nada . Básicamente estoy tratando de hacer que el menú desplegable vaya detrás del botón avatar, y establecer el borde inferior del avatar como ninguno, por lo que se ve sin problemas.

¿Alguna idea de qué podría hacer diferente?

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

Fuente

2011-12-02 dallen

Trate border-bottom-style:none; en el 'avatar" y border-top-style:none; en el menú desplegable, o simplemente un negativo margin-top.

Fuente

2011-12-04 01:42:27 SemicolonExpected

el código HTML debería tener este aspecto:

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

y fijo :)

Fuente

2011-12-02 21:50:51

que funciona, excepto que ahora cuando se ciernen sobre el avatar, no aparecerá en el menú desplegable. Mi CSS para obtener el menú desplegable para aparecer es esta línea, pero no estoy seguro de cómo lo arreglaría: header .avatar: hover .dropdown {display: block;} – dallen

Bien, lo arreglé haciendo esto: header .avatar: hover + div.dropdown { display: block;}. Pero ahora, cuando muevo mi cursor fuera del área del avatar y en el menú desplegable, el efecto de desplazamiento del avatar se va. ¿Cómo lo hago para mantenerlo? – dallen

Id decir que la forma correcta de abrir el menú desplegable es al hacer clic, y no en vuelo estacionario, pero de todas formas. MANTENER el menú desplegable visible con d iv.user: hover, y eso debería arreglarlo –

Put "avatar" dentro "desplegable" y el uso de un negativo margin-top.

Fuente

2011-12-02 21:51:17

No funciona para mí. No me da el resultado que quiero. La porción desplegable aún está sobre la porción de avatar. Necesito que se vaya. La respuesta a continuación funciona, más o menos. – dallen

¿Cómo organizo el menú desplegable de div detrás de otro div para que se cubra parte del borde desplegable?

Respuesta

Cuestiones relacionadas