How to fix error with dropdown-menu in bootstrap??

Question

JavaScript

In general, the dropdown menu appears below the next item. It seems that I tried options with position and z-index, but there are no results.

<nav class="menu">
                    <ul>
                        <li>
                            <a href="#">Data Management</a>
                                <p>
                                    Hello
                                    <button class="btn btn-sm btn-secondary dropdown-toggle" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Сменить
                                    </button>
                                    <span class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a href="#" class="dropdown-item">На лидера</a>
                                        <a href="#" class="dropdown-item">На законодателя</a>
                                        <a href="#" class="dropdown-item">На аналитика</a>
                                        <a href="#" class="dropdown-item">На тренера</a>
                                    </span> 
                                </p> 
                        </li>
</ul>
</nav>

Answer 1

overflow: hidden?