当父级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>根据溢出上下移动。 但是当溢出：隐藏时，孩子<ul>没有显示。当我删除它时，子<ul>显示，但<span>滚动dosenot工作。我该如何解决这个问题？

Answer 1

我相信问题是你的所有UL都是高度：450px，是否只应用顶部元素来解决问题？

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

Answer 2

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

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

Answer 3

添加位置：绝对子元素