purecss make .pure-menu-scrollable and pure-menu-has-children work together

Actually I would like to have horizontally scrollable menu with dropdowns smth like this:

<link rel="stylesheet" href="http://ift.tt/1w8cPLR">

<div class="pure-menu pure-menu-horizontal pure-menu-scrollable pure-menu-fixed">
    <a href="#" class="pure-menu-heading">Brand</a>
    <ul class="pure-menu-list">
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Settings</a></li>
        <li class="pure-menu-item"><a href="#" class="pure-menu-link">Log Out</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link" name="menuLink1">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

But it does not work. Actually horizontal menu scrolling works, but dropdown does not(( I found out that it is because .pure-menu-scrollable and pure-menu-has-children classes can't get along. So at this point I can have or scrolling menu or menu with dropdown but not both at the same time.

Is there any way to make pure menu both scrollable and with dropdown?