Фокусировка на вводе приводит к тому, что другие элементы li вертикально выравниваются, чтобы испортить

Question

У меня есть nav с элементами li. Один элемент li содержит форму. Когда я нажимаю кнопку в форме или кнопку отправки формы, выравнивание всех винтов вверх. Я отправлю код и рисунки ниже.

<div class="navbar"> 
<ul> 
    <?php 

    if (!empty($_SESSION['userid'])) { 
     ?> 
     <li class="search_dreams"> 
      <form> 
       <input type="search" placeholder="Search Dreams..."> 
       <input type="image" src="images/buttons/search.png"> 
      </form> 
      <div class="results" style="display:none"> 
       <ul> 

       </ul> 
      </div> 
     </li> 
     <?php 
    } 

    ?> 

    <li><a href="google.com">Test</a></li> 
    <li><a href="google.com">Test</a></li> 
    <li><a href="google.com">Test</a></li> 
    <li><a href="google.com">Test</a></li> 

</ul> 

CSS

/* Nav */ 
div.navbar { 
    background-color: rgb(20, 150, 220); 
    height: 50px; 
    width: 100vw; 
    border-bottom: 1px solid rgb(20, 50, 200); 

    position: fixed; 
    z-index: 1000; 
} 

div.navbar ul { 

    padding: 0 20px; 
    text-align: center; 
    max-height: 50px; 
    overflow: hidden; 
} 

div.navbar ul li { 
    margin: 0 50px; 
    display: inline-block; 

    background-color: red; 
} 

div.navbar ul li a { 
    text-decoration: none; 
    line-height: 50px; 
} 

div.navbar ul li a:hover { 
    background-color: rgb(15, 120, 180); 
} 

div.navbar ul li.login form input { 
    width: 200px; 
    height: 30px; 
    font-size: 20px; 
    text-indent: 5px; 
    border-radius: 3px; 
} 

div.navbar ul li.login form input[type=submit] { 
    font-size: 19px; 
    background-color: rgb(240, 180, 40) !important; 
    color: white; 
    border-radius: 2px; 
    height: 30px; 
    width: 75px; 
} 

div.navbar ul li.logout form input { 
    background-color: rgb(0, 200, 255); 
    font-size: 19px; 
    color: white; 
    border-radius: 2px; 
    height: 30px; 
    width: 80px; 
} 

div.navbar ul li.search_dreams form input[type=search] { /* Search Dream Text Input */ 
    width: 500px; 
    height: 40px; 
    text-indent: 10px; 
    font-size: 15px; 
    outline: none; 
    border: none; 
} 

div.navbar ul li.search_dreams form input[type=image] { /* Search Dream Button */ 
    float: right; 
    width: 75px; 
    height: 40px; 
} 

без фокусирования в поле поиска

С фокусируясь в поле поиска

Answer 1

Set ting overflow: скрытый в ul вызывал такое поведение. Не совсем уверен, почему.