Jak ustawić opcję div za innym elementem div, aby część granicy rozwijanej została pokryta?

Buduję proste menu rozwijane dla awatara. Problem polega na tym, że chcę, aby menu rozwijane obejmowało część granicy awataru, więc wygląda bardziej bezproblemowo. Oto co mam na myśli.Jak ustawić opcję div za innym elementem div, aby część granicy rozwijanej została pokryta?

Przed

Before

enter image description here

prawdopodobnie zbudowany mój HTML/CSS niepoprawnie, ale próbowałem dodając Z indeksów, ale nigdy nie zmieniła niczego . Zasadniczo staram się, aby menu rozwijane znajdowało się za przyciskiem awatara, i ustawiałem dolną granicę awatara jako brak, więc wygląda to bezbłędnie.

Jakieś pomysły, co mogę zrobić inaczej?

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

Źródło

2011-12-02 dallen

Spróbuj border-bottom-style:none; na „Avatar” i border-top-style:none; na swojej liście rozwijanej lub po prostu negatywne margin-top.

Źródło

2011-12-04 01:42:27 SemicolonExpected

HTML powinien wyglądać następująco:

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

i stałe :)

Źródło

2011-12-02 21:50:51

To działa, z wyjątkiem teraz kiedy najedź awatara, listy rozwijanej nie pojawi. Moje CSS dla Pojawienie się listy rozwijanej jest tą linią, ale nie wiem, jak to naprawić: header .avatar: hover .dropdown {display: block;} – dallen

OK, naprawiłem to, wykonując to: header .avatar: hover + div.dropdown { display: block;} Ale teraz, kiedy odsuwam kursor od obszaru awatara i do listy rozwijanej, efekt unoszący się w awatara odchodzi Jak mogę go zatrzymać? – dallen

Podobno właściwy sposób na otwarcie listy rozwijanej to: po kliknięciu, a nie po najechaniu kursorem, ale tak czy inaczej. Zablokuj widoczne za pomocą d iv.user: hover, a to powinno go naprawić –

put "Avatar" wewnątrz "rozwijanej" i używać negatywny margin-top.

Źródło

2011-12-02 21:51:17

Nie działa dla mnie. Nie daje mi rezultatu, którego chcę. Część rozwijana nadal znajduje się nad częścią awatara. Potrzebuję go, aby przejść do. Poniższa odpowiedź działa, w pewnym sensie. – dallen

Jak ustawić opcję div za innym elementem div, aby część granicy rozwijanej została pokryta?

Odpowiedz

Powiązane problemy