html - 一个元素在电话大小的另一个元素上弹出

Question

这应该是搜索并在其下列出列表，但是当我尝试写一些东西时，我遇到了这个问题

列表弹出搜索，你能告诉我如何解决这个问题

代码：

    .navigation{
      position: fixed;
      left: -32rem;
      width: 40rem;
      height: 100%;
      background:linear-gradient(to top,    rgb(0, 0, 0, .9),rgb(0, 0, 0, .9));
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      transition: left .8s cubic-bezier(1, 0, 0, 1);
      z-index: 4;
    
    }
    .navigation-serch{
      position: relative;
      top: 10rem;
    }
    .navigation-list{
    list-style: none;
    padding: 0;
    height: 28rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

<nav class="navigation">
        <div class="navigation-headin">
            <form class="navigation-serch">
                <input type="text" class="navigation-search-input" placeholder="Search">
                <button name="navigation-search" class="navigation-search-btn"> 
                    <i class="fas fa-search"></i>
                </button>
            </form>
        </div>
        <ul class="navigation-list">
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Home</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">About us</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Rooms</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Events</a></li>
            <li class="navigation-item"> <a href="#" name="navigation-item " class="navigation-link">Contact</a></li>
        </ul>
        <div class="copy-right">
            <p>&copy; 2021 Sunset Lodge. All Rights Reserved.</p>
        </div>
    </nav>

标签： htmlcsslistinput