How can I position my autocomplete box under the search box?

Hello I’m trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.

.header ul {
    list-style-type: none;
    overflow: hidden;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-right: 25px;
  }
  
  .header li {
    float: right;
  }
  
 .header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .header{
    display: flex;
    background-color: #333;
  }
  
.suggesetionbox {
    position: absolute;
    top: 50px;
    width: 150px;
    background-color: #fff;
    border: 1px solid;
}

.SearchContainer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input{
  border-radius: 10px;
}

<div class="header">
  <h1>logo</h1>
  <ul>
    <li>
      <div class="SearchContainer">
        <input placeholder="Search" class="search" type="text">
        <div class="suggesetionbox">
          <p>item1</p><p>item2</p>
        </div>
      </div>
    </li>
    <li>
      <a href="/">Home</a>
    </li>
    <li> <a href="/login">Login</a></li>
  </ul>
</div>

You can see in css “suggesetionbox” the top property is targeting complete page not parent div. Can someone suggest how can I append the div correctly under search box.

Thanks

Answer

EDIT: First, add position: relative to your .SearchContainer. This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.

Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul

.header ul {
    list-style-type: none;
    display: flex;
    width: 100%;
    justify-content: flex-end;
    margin-right: 25px;
    align-items: center;

  }
  
  .header li {
    float: right;
  }
  
 .header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  .header{
    display: flex;
    background-color: #333;
  }
  
.suggesetionbox {
    position: absolute;
    width: 150px;
    background-color: #fff;
    border: 1px solid;
}

.SearchContainer {
    width: 100%;
    position: relative;
}

<div class="header">
  <h1>logo</h1>
  <ul>
    <li>
      <div class="SearchContainer">
        <input placeholder="Search" class="search" type="text">
        <div class="suggesetionbox">
          <p>item1</p><p>item2</p>
        </div>
      </div>
    </li>
    <li>
      <a href="/">Home</a>
    </li>
    <li> <a href="/login">Login</a></li>
  </ul>
</div>