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

Question

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

.flexslider {background: #fff; 
border: 4px solid #fff; 
position: relative; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
-o-border-radius: 5px; 
border-radius: 5px; 
zoom: 1;
}

相应的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>

现在我有jquery下拉菜单，其子元素css是：

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

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 class="flexslider">后，下拉菜单的子元素会隐藏。如果我从中删除position:relative;，则菜单工作正常，但滑块div变宽，并且出现水平滚动条（但在附加滚动区域中没有任何内容！，请参阅参考图像）