html / jquery菜单被切断了

Question

我正面临这个问题，我的菜单被它包含的“top”-div 切断了。 z-index或overflow都没有解决问题，所以我问你们，如果你有任何想法如何解决这个问题。

我准备了一个JFiddle：

<div class="top">
<nav class="main-nav">
...
<ul>
    <li>
    <div id="dd2" class="wrapperApprovals someWrapper borderTop badgeAble">
        menu
    <div class="dropdown">
            <div>
                <a href="#" class="lightblue">subMenu1</a>
            </div>
            <div>
                <a href="#" class="lightblue">subMenu2</a>
            </div>
        </div>
    </div>
    </li>
</ul>
</nav></div>


.top {
    width: 100%;
    height: 124px;
    border-bottom: 2px solid black;
    top: 0px;
    ...
}

http://jsfiddle.net/cK3u6/

你可以检查它

（我有两个子菜单，但有一个被切断）

当我将其复制并粘贴到Internet Explorer时，它可以工作，我想知道为什么它在我的JSf应用程序中不起作用？

感谢您的帮助!!