Child ul not showing when parent ul set with overflow hidden

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);
    }
);

Here on click <span> up and down the gadget <ul> moves up and down according to the overflow. But when overflow:hidden is applied the child <ul> is not showing. And when I remove it child <ul> shows but the <span> scroll dosenot work. How can i solve this?

Answer 1

我相信问题是您所有的UL都是height：450px，将高度仅应用于顶部元素是否可以解决问题？

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

Answer 2

您的嵌套ul需要绝对定位，并且要正确滚动，请抓住body元素并应用动画方法http://jsfiddle.net/PJ3gp/

#gadget ul li ul{display:none;position:absolute;}

Answer 3

添加位置：绝对子元素