list-group with dropdown and input-group with button -> button displayed over opened dropdown

Created by: simon11196

I have some code like the following example. when i open the dropdown, the button of the input-group in the next list-group-item ist showed over the dropdown, while the dropdown-menu is hovered. When the mouse is outside the dropdown-menu, all is as normal...

<div class="col-2">
    <ul class="list-group">
        <li class="list-group-item">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown button
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
        </li>
        <li class="list-group-item">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-cubeBlue" type="button">Button</button>
                </div>
            </div>
        </li>
    </ul>
</div>