Santosh Bohara Santosh Bohara - 5 months ago 9
CSS Question

a:link not working in hover DIV

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 is not visible on hover of class account if any a:link is added with in same div (like in above div login). but hover works if i remove a:link from div login.

I could not figure out the problem.

Answer

I would rewrite your markup as follows:

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

As Muhammad Usman has mentioned in his comments, you shouldn't really nest an a element within an a element... As you can see, I've moved the hidden div you want to display outside of the first a element and used a sibling selector to target it when hovering over the first a element.

If you really must keep with your current markup, can't you just change the location of the :hover state to the .account class itself as follows:

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

Comments