JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cabecera">
    <ul>
        <li>inicio</li>
        <li>final</li>
        <li>
            <form>
                <input type="text" value="" placeholder="busca algo" />            
            </form>
        </li>
    </ul>
</div>

CSS

.cabecera{
   background:black;
}
ul{
  position:relative;
  padding: 10px 50px;
    height:25px; /* la posicion top que le daremos + padding al form */
}

li{
  float:left;
  color:white;
  margin-right:30px;
}

form{
   display:none;
   position:absolute;
   top:35px; /* height+padding = 25+10*/
   width:300px;
   background:black;
   padding:10px;
}
input{
 
}

.cabecera:hover form{
   display:block;
}