CSS/JQuery Как я могу отобразить div непосредственно под кнопкой?

Question

У меня есть кнопка, которая при зависании отображает div.

Как я могу разместить этот div, чтобы отображаться непосредственно под кнопкой при отображении ???

<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

Оберните свою кнопку другим элементом уровня блока, таким как div, и он должен работать больше, как вы ожидали.

Answer 2

Вам необходимо разместить всплывающее окно div; относительно чего-то другого.

Таким образом, вы можете поместить его в a тега, если это элемент уровня блока или поставить одновременно кнопку и всплывающий текст в другом теге (li, div, независимо от вашего меню состоит из).

Тогда это что-то вроде:

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