CODEWITHSUNDEEP
jquerycss
xrcwrn
xrcwrn

Reputation: 5327

how to show div below the link

Here every thing is working properly, Only the problem is the new_r_div is not showing below the 

 <a href="#">Response Request</a>'

How to do this.

You can see the code here

HTML:

 <div id="response"> I found this to be a very nice solution. If you had floating children and non floating children, the height will automatically be adjusted to the min amount of space needed. The width is set to 100% to expand to the
this is a
   <a href="#">Response Request</a>
   <div class="new_r_div">
   <ul>
      <li><a href="#" class="link" >Confirm</a></li>
      <li><a href="#" class="link" >Delete</a></li>
   </ul>
 </div>
</div>

CSS:

 .new_r_div{
   position:absolute;
   width:100px;
   height:40px;
   background:#ccc;
    overflow: hidden;
   border: solid 2px #ccc;
 background: #99CCFF;
  z-index: 9999;
   -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 visibility: hidden;
}

#response:hover .new_r_div
 {
   visibility: visible;
}
   .new_r_div li:hover{
      background:red;
  }

Upvotes: 0

Views: 311

Answers (2)

Mr_Green
Mr_Green

Reputation: 41842

This can be done using jQuery.. Just add the following jQuery to your code..

$(function(){ setDiv(); });  //Executes on refresh
$(window).resize(function () { setDiv();});  //Executes on page resize

function setDiv(){
    var aLeft = $('#response>a').offset().left;
    $('.new_r_div').css({'left' : aLeft});
}

Working Fiddle

Upvotes: 1

user1995997
user1995997

Reputation: 591

I think you want something like => jsfiddle Link.

You have to make some changes in css as shown.

.new_r_div {
    display:inline-block;   
    margin-top:20px;
    margin-left:-102px; 
    position:absolute;
    width:100px;   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;
    visibility: hidden;
}

Upvotes: 0

Related Questions