CSS Overflow hidden affects Semantic UI dropdown

I'm trying to create a menu component using Semantic-UI, the menu has in it an item with several dropdown. The set of dropdowns has a vertical scroll (because I could have one or ten). The scroll works fine, but, in order to show a custom scroll button, I have to set the overflow property as hidden, the problem is that when the property has that value, the items in the dropdown menu doesn't show properly.

If I change the value to auto or normal, the dropdown list shows correctly

Example Code

HTML

<div class="ui menu">
<div class="header item">
    Header
</div>
<a class="item" id="btnScrollLeft">
    <i class="chevron circle large left icon"></i>
</a>
<div class="item section-menu">
    <div class="ui floating dropdown item ddwnsection">
        Item 1
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
        </div>
    </div>

    <div class="ui floating dropdown item ddwnsection">
        Item 2
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
        </div>
    </div>

    <div class="ui floating dropdown item ddwnsection">
        Item 3
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
        </div>
    </div>

     <div class="ui floating dropdown item ddwnsection">
        Item 4
        <i class="dropdown icon"></i>
        <div class="menu">
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
            <div class="item">
                Option1
            </div>
        </div>
    </div>

</div>
<a class="item" id="btnScrollRight">
    <i class="chevron circle large right icon"></i>
</a>

CSS

.section-menu {
width: 30% !important;
white-space: nowrap;
overflow: hidden;
}

Is there a way to get this done? Here is the fiddle with the example code.

Thanks in advance.