title: Want to show div just under the link using jquery when user click on link
body: <p>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 &amp; left will be set by code according to the top &amp; left position of the link. need help.</p>
  
  <pre><code>&lt;a id="link"&gt;About&lt;/a&gt;
  
  &lt;div id="submenu"&gt;
       &lt;a href="#"&gt;About the company&lt;/a&gt;&lt;br /&gt;
       &lt;a href="#"&gt;Careers&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>this way i do it here is my full code</h2>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;style type="text/css"&gt;
      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;
      }
  &lt;/style&gt;
      &lt;script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          $(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" &amp;&amp; e.target.id != "submenu"
                          &amp;&amp; e.target.className != "root"
                          &amp;&amp; e.target.className != "mainli" 
                          &amp;&amp; e.target.className != "atag") {
                        $('div#submenu').fadeOut();
                    }
                });
  
              function toggleVisibility() {
                  var submenu = $('div#submenu');
                  if (submenu.is(":visible")) {
                      submenu.fadeOut();
                  } else {
                      submenu.fadeIn();
                  }
              }
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;a id="link"&gt;About&lt;/a&gt;
      &lt;a id="link1"&gt;My Test&lt;/a&gt;
      &lt;div id="submenu"&gt;
          &lt;ul  class="root"&gt;
              &lt;li class="mainli"&gt;&lt;a class="atag" href="http://www.bba-reman.com"&gt;Ship with UPS&lt;/a&gt;&lt;/li&gt;
              &lt;li class="mainli"&gt;&lt;a class="atag" href="http://www.bba-reman.com"&gt;Ship with FedEx&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>