Question

I have a button that when hovered displays a div.

How can I postion this div to appear directly under the button when displayed???

  <script type="text/javascript">
 $(document).ready(function(){
  $(".plans").hover(function() {
    $("#planssubnav").show("slow");
  }, function(){
    $("#planssubnav").hide("slow");
  });
 });
  </script>

 <a href="/plans" style="font-size:14px;" class="plans fg-button fg-button-icon-right ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-triangle-s"></span>Plans</a>

  <div id="planssubnav" style="display:none">
  <h1> content</h1>
   </div>

Answer 1

Wrap your button with another block-level element, such as a div, and it should work more like you expected.