：リンク：リンクがあれば

Question

HTML

<li class="account"> 
     <a href="">My Account       
      <div id="my_account"> 
       <div id="user_pic"><img src=""></div> 
       <div id="login"><a href="">Login</a></div> 
       <div id="register">Register</div> 
      </div> 
     </a> 
    </li> 

CSS

#my_account{ 
    display: none; 
} 
.account a:hover #my_account{ 
    width: 200px; 
    display: block; 
    position: absolute; 
    z-index: 999; 
} 

のdiv my_accountはクラスアカウントのホバーに表示されていないホバーDIVで動作しません同じdiv内に追加されます（上記divのようにログイン）。 div：ログインからリンクを削除すると、ホバーが機能します。

私は問題を把握できませんでした。

Answer 1

次のように私はあなたのマークアップを書き換えます：

#my_account{ 
 
    display: none; 
 
} 
 
.account > a { 
 
    display: block; 
 
    padding: 0 20px 20px 0; 
 
    position: relative; 
 
} 
 
.account a:hover + #my_account, #my_account:hover { 
 
    width: 200px; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 999; 
 
    top: 30px; 
 
}

<li class="account"> 
 
    <a href="">My Account</a>       
 
    <div id="my_account"> 
 
     <div id="user_pic"><img src=""></div> 
 
     <div id="login"><a href="">Login</a></div> 
 
     <div id="register">Register</div> 
 
    </div> 
 
</li>

をムハンマドウスマンは彼のコメントで述べたように、あなたはa要素内で実際に巣a要素をすべきでありません...ご覧のとおり、最初のa要素の外側に表示したい隠しdivを移動し、最初のa要素をホバリングすると、それを対象とする兄弟セレクタを使用しました。

#my_account{ 
 
    display: none; 
 
} 
 
.account > a { 
 
    display: block; 
 
} 
 
.account:hover #my_account{ 
 
    width: 200px; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 999; 
 
}

<li class="account"> 
 
     <a href="">My Account       
 
      <div id="my_account"> 
 
       <div id="user_pic"><img src=""></div> 
 
       <div id="login"><a href="">Login</a></div> 
 
       <div id="register">Register</div> 
 
      </div> 
 
     </a> 
 
    </li>