由于css中的溢出隐藏属性，子菜单在父div后面隐藏

Question

我正在尝试使用子菜单创建可滚动菜单，并且为了滚动目的，我需要使用overflow：hidden属性，由于这个属性，我的子菜单正在隐藏在我已经设置溢出的父div后面：隐藏属性，所以我想让这些子菜单可见，这里我的HTML看起来像

<div id="content" class="defaults">
            <div class="wrapper">
                <ul id="thumbs" class="static content">
                    <li class="static dynamic-children item">
                        <a><span><span>Contact Us</span></span></a>
                        <ul style="" class="dynamic">
                            <li class="dynamic item">
                                <a><span>Link1</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span>Link2</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span><span>Link3</span></span></a>
                            </li>
                        </ul>
                    </li>
                    <li class="static item">
                        <a><span><span>About Us1</span></span></a>
                    </li>
                    <li class="static item">
                        <a><span><span>About Us2</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic item">
                                <a><span><span>Link1</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span><span>Link2</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span><span>Link3</span></span></a>
                            </li>
                        </ul>
                    </li>
                    <li class="static item">
                        <a><span><span>About Us3</span></span></a>
                    </li>
                    <li class="static item">
                        <a><span><span>About Us4</span></span></a>
                    </li>
                    <li class="static item">
                        <a><span><span>About Us</span></span></a>
                        <ul class="dynamic">
                            <li class="dynamic item">
                                <a><span><span>Link1</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span><span>Link2</span></span></a>
                            </li>
                            <li class="dynamic item">
                                <a><span><span>Link3</span></span></a>
                            </li>
                        </ul>
                     </li>
                </ul>
            </div>
        </div>

这是我的CSS

  .wrapper
    {
        width: 817px;
        background: rgb(205, 205, 245);
        overflow: hidden;
        margin-left: 66px;
        margin-right: 43px;
        height: 30px;
        margin-top: -24px;
}
    .content
    {
        width: auto;
        white-space: nowrap;
        margin-left: 6px;
        margin-top: 3px;
        margin-right: 6px;    
    }




    .item
    {
        display: inline-block;
        /* background: #0072c6;*/
        width: auto;
        height: auto;
        background: #dcecd9;
        width: auto;
        height: auto;
        margin-left: 2px;
        margin-top: 2px;
        margin-right: 1px;
    }