水平菜单跨主div块和子菜单不显示

Question

如何在水平菜单中创建子菜单。

1. 我在父菜单中有40个菜单项。
2. 某些父菜单也有子菜单。
3. 我需要下一个或上一个选项来显示其余菜单。
4. 子菜单也应该显示。

Here is a fiddle我所尝试过的。

我没有添加子菜单。

HTML

<div class="content">           
    <div id="menu">
        <a href="#" class="right">Right</a>
        <a href="#" class="left">Left</a>
        <ul>
            <li>Item Lits 1</li>
            <li>Item Lits 2</li>
            <li>Item Lits 3 </li>
            <li>Item Lits 4</li>
            <li>...</li>
        </ul>  
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
.content{
    margin:0px auto;
    width:400px;
    border:1px solid #d7d7d7;
    padding:10px;
    min-height: 400px;
}


#menu {
    position: relative;
    overflow: hidden;
}

#menu ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 10px 15px;
    width: auto;              
    text-align: center;
}

a.left, a.right {
    position: absolute;
    z-index: 999;
    display: block;
    padding: 3px 4px;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
}

a.right {
    right: 0;            
}