CSS/Jquery 직접 div 아래에 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: ... 
}