CODEWITHSUNDEEP
jquerycss
user342391
user342391

Reputation: 7827

CSS/Jquery How can I display a div directly under button?

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>

Upvotes: 0

Views: 2091

Answers (2)

jeroen
jeroen

Reputation: 91734

You need to position your pop-up div absolute; relative to something else.

So you can either put it inside the a tag if it is a block-level element or put both the button and the pop-up text in another tag (li, div, whatever your menu is made up of).

Then it is something like:

#parent {
    position: relative;
}
#planssubnav {
    position: absolute;
    top: ...
    left: ...
}

Upvotes: 2

landons
landons

Reputation: 9547

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

Upvotes: 1

Related Questions