Want to show div just under the link using jquery when user click on link

jquery

Solution

For displaying the `<div>` under your link you can do the following:

$('#link').click(function() {
    $('#submenu').css({
        left: $(this).offset().left + 'px',
        top: ($(this).offset().top + $(this).height()) + 'px'
    }).show();
});

And in your CSS:

#submenu {
    position: absolute;
}

Problem

i have link and one div. i want to show the div just under the link when user click on the link. i want to position div just under the link by code means div's top & left will be set by code according to the top & left position of the link. need help. ``` <a id="link">About</a> <div id="submenu"> <a href="#">About the company</a><br /> <a href="#">Careers</a> </div> ``` this way i do it here is my full code ``` <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> a#link { background: #CCC; padding: 10px; cursor: pointer; margin-left: 600px; margin-top: 200px; position: absolute; } a#link1 { background: #CCC; padding: 10px; cursor: pointer; margin-left: 600px; margin-top: 250px; position: absolute; } div#submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 165px; display: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); border:5px solid; border-color:#F1F2F2; z-index:9999; } div#submenu li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration: none; } div#submenu li a:hover { background: #39B54A; color: #FFFFFF; text-decoration: none; } .root { list-style: none; margin: 0px; padding: 0px; padding: 11px 0 0 0px; border-top: 1px solid #dedede; } </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#link").click(function () { $('#submenu').insertAfter($('#link')); $('#submenu').css({ left: $(this).offset().left + 'px', top: ($(this).offset().top + $(this).outerHeight()) + 'px', position: "absolute" }); toggleVisibility(); false; }); $("html").click( function (e) { if (e.target.id != "link" && e.target.id != "submenu" && e.target.className != "root" && e.target.className != "mainli" && e.target.className != "atag") { $('div#submenu').fadeOut(); } }); function toggleVisibility() { var submenu = $('div#submenu'); if (submenu.is(":visible")) { submenu.fadeOut(); } else { submenu.fadeIn(); } } }); </script> </head> <body> <form id="form1" runat="server"> <a id="link">About</a> <a id="link1">My Test</a> <div id="submenu"> <ul class="root"> <li class="mainli"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li> <li class="mainli"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li> </ul> </div> </form> </body> </html> ```

Original source