Css 位置相对div隐藏位置绝对div

我基本上是php程序员，只有基本的css知识。我目前正在实现一个jquery滑块，其div为

相应的HTML为：

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="css/images/sliders/inacup_samoa.jpg" />
            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
        </li>
        <li>
            <a href="http://flex.madebymufffin.com"><img src="css/images/sliders/inacup_pumpkin.jpg" /></a>
            <p class="flex-caption">This image is wrapped in a link!</p>
        </li>
        <li>
            <img src="css/images/sliders/inacup_donut.jpg" />
        </li>
        <li>
            <img src="css/images/sliders/inacup_vanilla.jpg" />
        </li>
    </ul>
  </div>

以及HTML：

<div id="menu">
            <ul id="jsddm">
                <li><a href="#">JavaScript</a>
                    <ul>
                        <li><a href="#">Drop Down Menu</a></li>
                        <li><a href="#">jQuery Plugin</a></li>
                        <li><a href="#">Ajax Navigation</a></li>
                    </ul>
                </li>
                <li><a href="#">Effect</a>
                    <ul>
                        <li><a href="#">Slide Effect</a></li>
                        <li><a href="#">Fade Effect</a></li>
                        <li><a href="#">Opacity Mode</a></li>
                        <li><a href="#">Drop Shadow</a></li>
                        <li><a href="#">Semitransparent</a></li>
                    </ul>
                </li>
                <li><a href="#">Navigation</a></li>
                <li><a href="#">HTML/CSS</a></li>
                <li class="last"><a href="#">Help</a></li>
            </ul>
        </div>

---

现在的问题是，添加div后，下拉菜单的子元素隐藏了。如果我删除位置：相对；从中，菜单工作正常，但滑块div变宽，水平滚动条出现，但其他滚动区域中没有显示任何内容！，参见参考图片

小提琴会有帮助，我无法从图片中理解。我上传到这里：上传到jsfiddle.net，这样我可以编辑并回答您。您尝试过将其从相对更改为绝对吗？

#jsddm li ul
{   
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
margin-top:12px;
}

<div id="menu">
            <ul id="jsddm">
                <li><a href="#">JavaScript</a>
                    <ul>
                        <li><a href="#">Drop Down Menu</a></li>
                        <li><a href="#">jQuery Plugin</a></li>
                        <li><a href="#">Ajax Navigation</a></li>
                    </ul>
                </li>
                <li><a href="#">Effect</a>
                    <ul>
                        <li><a href="#">Slide Effect</a></li>
                        <li><a href="#">Fade Effect</a></li>
                        <li><a href="#">Opacity Mode</a></li>
                        <li><a href="#">Drop Shadow</a></li>
                        <li><a href="#">Semitransparent</a></li>
                    </ul>
                </li>
                <li><a href="#">Navigation</a></li>
                <li><a href="#">HTML/CSS</a></li>
                <li class="last"><a href="#">Help</a></li>
            </ul>
        </div>