Question

I am showing one div after hover on a link. I want to click one of the link in new div, and after clicking any link div should be hidden.

you can see code at http://jsfiddle.net/xrcwrn/MEdRy/
html:

<div id="response">
            <a href="#">Response Request</a>
        </div>
    <div class="new_r_div hidden">
     <ul>
        <li><a href="#">Confirm</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
 </div>

Jquery:

  $("#response").hover(function(){
$('.new_r_div').removeClass('hidden');
},function(){
   $('.new_r_div').addClass('hidden');
});

css:

 .new_r_div{
     position:absolute;
    width:100px;
    height:40px;
    background:#ccc;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;

}
.hidden{
  visibility: hidden;
}

Answer 1

Try to put the hidden div inside the #response div

Demo: http://jsfiddle.net/MEdRy/4/

HTML:

<div id="response">
    <a href="#">Response Request</a>

    <div class="new_r_div hidden">
         <ul>
            <li><a href="#">Confirm</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
     </div>
</div>

JS:

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

$("#response li a").click(function(){
     $('.new_r_div').addClass('hidden');
});