javascript - オーバーフローを非表示にして親 ul を設定すると、子 ul が表示されない

Question

HTML

 <div id="gadget">
 <span id="nav_up">UP</span>
    <ul>
       <li>LIST1
           <ul>
             <li>Child1.1</li>
             <li>Child1.2</li>
           </ul>
       </li>
       <li>LIST2
           <ul>
             <li>>Child2.1</li>
           </ul>
       </li>
       <li>LIST3
           <ul>
             <li>>Child3.1</li>
           </ul>
       </li>
    </ul>
 <span id="nav_down">Down</span>
 </div>

CSS

  #gadget{width:75px; height: 100%;}
  #gadget ul{height:450px; width:100%; overflow:hidden;}
  #gadget ul li ul{display:none;}
  #gadget ul li:hover ul{display:block;}

JS

$('#nav_down').click(
    function () {
        $('#gadget ul').animate({scrollTop: '100px'}, 800);
    }
);

$('#nav_up').click(
    function () {
        $('#gadget ul').animate({scrollTop: '0px'}, 800);
    }
);

ここで上下にクリックすると、オーバーフローに応じて<span>ガジェットが上下に移動します。<ul>しかし、overflow:hidden が適用されると、子<ul>は表示されません。そして、それを削除すると、子<ul>は表示されますが、<span>スクロールは機能しません。どうすればこれを解決できますか?

Answer 1

問題は、すべての UL が高さ:450px であることだと思いますが、高さを一番上の要素にのみ適用すると問題が解決しますか?

 #gadget > ul{height:450px; width:100%; overflow:hidden;}

Answer 2

position:absolute を子要素に追加