Hover on input to sibling item does not work - html

Question

I'm trying to do a basic nav-bar. This nav bar contains a "search" button.
My goal is to make a hover in the search button that makes appear an input (and moves the button to the left) for the user to search anything he wants.
The thing is: I need to make the search button move to the left when I hover the input too, and I'm not figuring it out.
And as you see with that code, the item bugs.
Here's the code:
/*----------NAV BAR----------*/
body {
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
.nav-backgc {
height: 140px;
position: fixed;
width: 100%;
transition: 0.4s;
z-index: 9;
backdrop-filter: blur(1rem);
background-color: #DAA520;
}
.container-nav {
width: 80%;
margin-left: 10%;
position: fixed;
z-index: inherit 9;
}
.logonav {
max-width: 65px;
padding: 10px 0px 2px 0px;
position: relative;
float: left;
margin-top: -5px;
display: none;
}
.logo {
max-width: 65px;
padding: 10px 0px 2px 0px;
}
nav {
width: 100%;
padding-bottom: 2px;
}
.navbar ul {
padding: 0;
list-style: none;
}
.navbar li {
display: inline-block;
margin: 0px 25px;
position: relative;
}
.navcarrito span {
display: none;
}
.navbar a {
text-decoration: none;
color: #fff;
}
.navbar a {
color: #fff;
}
.barra {
margin-top: 27px;
}
hr {
opacity: 20%
}
.navcarrito.login-carrito {
display: none;
font-size: 18px;
}
.navcarrito {
display: flex;
float: right;
position: fixed;
right: 20%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin {
float: right;
display: flex;
position: fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin {
float: right;
position: fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.nav-arriba {
padding-top: 50px;
width: 100%;
}
.nav-arriba a {
text-decoration: none;
}
.nav-arriba ul {
padding: 0;
list-style: none;
}
.nav-arriba li {
display: inline-block;
margin: 0px 25px;
position: relative;
}
.search {
transition: 0.3s;
}
.search:hover {
margin-right: 100px;
}
.searchBuscador {
display: none;
position: absolute;
}
input:focus:hover {
margin-right: 100px;
}
.search:hover~.searchBuscador {
display: inline-block;
}
/* ==========================================================================
DROPDOWN MENU
========================================================================== */
.dropdownMenu {
position: absolute;
display: none;
width: 500px;
background-color: #fff;
border-radius: 7px;
justify-content: space-evenly;
flex-wrap: wrap;
box-shadow: 2px 2px rgba(163, 163, 163, 0.295);
}
.dropdownBoton:hover>.dropdownMenu {
display: flex;
}
.dropdownMenu a {
display: flex;
flex-direction: column;
width: 35%;
color: black;
border-radius: 5px;
margin-block-start: 0.5em;
height: 100px;
}
.dropdownMenu a h3 {
margin-block-start: 16px;
margin-block-end: -9.5px;
}
/* ==========================================================================
RESOLUCION 1200-1600
========================================================================== */
#media (min-width: 1024px) and (max-width: 1600px) {
.navlogin li a {
display: none;
}
.navcarrito span {
display: inline-block;
}
.navcarrito {
right: 6%;
}
}
#media (min-width: 1200px) and (max-width: 1300px) {
.navcarrito li {
margin: 0px 15px;
}
}
/*****RESOLUCION 1024*****/
#media (min-width:1024px) {}
/*****RESOLUCION 768*****/
#media (min-width:768px) {}
/*****RESOLUCION 480*****/
#media (min-width:480px) {}
/*****RESOLUCION 320*****/
#media (min-width:320px) {}
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="/stylesheets/nav.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/8431526c8f.js" crossorigin="anonymous"></script>
<header>
<div id="navbar" class="nav-backgc">
<div class="container-nav">
<div class="navbar">
<center>
<img src="/images/logo2.png" alt="BierClub" class="logo">
<ul id="navcarrito" class="navcarrito">
<li class="search"><i class="fas fa-search"></i></li>
<li><i class="fas fa-shopping-cart"></i></li>
<div class="searchBuscador">
<input type="text"></input>
</div>
<span>
<li class="login-carrito"><i class="fas fa-sign-in-alt"></i></li>
</span>
</ul><strong>
<ul id="navlogin" class="navlogin">
<li><i class="fas fa-sign-in-alt"></i> Iniciar sesion</li>
</ul>
</strong>
<hr><img src="/images/logo2.png" alt="BierClub" class="logonav" id="logonav">
<nav>
<ul class="barra"><strong>
<li class="dropdownBoton">Productos
<div class="dropdownMenu">
<a href="#">
<h3>Lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
<a href="#">
<h3>No lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
</div>
</li>
<li>Promociones</li>
<li>Suscribete</li>
<li>Envio</li>
<li>¿Quienes Somos?</li>
</ul></strong>
</nav>
</center>
</div>
</div>
</div>
</header>

Answer 1

Answer:
Onclick javascript statement added...
function search(){
document.getElementById("search-bar").style = "display:block;";
document.getElementById("search-bar").focus() ;
}
/*----------NAV BAR----------*/
body{
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
.nav-backgc{
height:140px;
position: fixed;
width: 100%;
transition: 0.4s;
z-index: 9;
backdrop-filter: blur(1rem);
background-color: #DAA520;
}
.container-nav{
width : 80%;
margin-left:10%;
position:fixed;
z-index:inherit 9;
}
.logonav{
max-width: 65px;
padding: 10px 0px 2px 0px;
position: relative;
float:left;
margin-top: -5px;
display:none;
}
.logo{
max-width: 65px;
padding: 10px 0px 2px 0px;
}
nav{
width: 100%;
padding-bottom: 2px;
}
.navbar ul{
padding: 0;
list-style: none;
}
.navbar li{
display: inline-block;
margin: 0px 25px;
position: relative;
}
.navcarrito span{
display: none;
}
.navbar a{
text-decoration: none;
color: #fff;
}
.navbar a{
color: #fff;
}
.barra{
margin-top: 27px;
}
hr{
opacity:20%
}
.navcarrito.login-carrito{
display: none;
font-size: 18px;
}
.navcarrito{
display: flex;
float:right;
position: fixed;
right: 20%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin{
float:right;
display:flex;
position:fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin{
float:right;
position:fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.nav-arriba{
padding-top: 50px;
width: 100%;
}
.nav-arriba a{
text-decoration: none;
}
.nav-arriba ul{
padding: 0;
list-style: none;
}
.nav-arriba li{
display: inline-block;
margin: 0px 25px;
position: relative;
}
.search{
transition: 0.3s;
}
.search:hover{
/* margin-right: 100px; */
}
.searchBuscador1{
display:block;
position:absolute;
}
#search-bar{
display:none;
}
input:focus:hover{
/* margin-right: 100px;*/
}
.search:focus .searchBuscador{
/* display: inline-block;*/
display:block;
}
/* ==========================================================================
DROPDOWN MENU
========================================================================== */
.dropdownMenu{
position: absolute;
display: none;
width: 500px;
background-color: #fff;
border-radius: 7px;
justify-content: space-evenly;
flex-wrap: wrap;
box-shadow: 2px 2px rgba(163, 163, 163, 0.295);
}
.dropdownBoton:hover > .dropdownMenu{
display:flex;
}
.dropdownMenu a{
display: flex;
flex-direction: column;
width: 35%;
color: black;
border-radius: 5px;
margin-block-start: 0.5em;
height: 100px;
}
.dropdownMenu a h3{
margin-block-start: 16px;
margin-block-end: -9.5px;
}
/* ==========================================================================
RESOLUCION 1200-1600
========================================================================== */
#media (min-width: 1024px) and (max-width: 1600px) {
.navlogin li a{
display:none;
}
.navcarrito span{
display: inline-block;
}
.navcarrito{
right: 6%;
}
}
#media (min-width: 1200px) and (max-width: 1300px) {
.navcarrito li{
margin: 0px 15px;
}
}
/*****RESOLUCION 1024*****/
#media (min-width:1024px) {
}
/*****RESOLUCION 768*****/
#media (min-width:768px) {
}
/*****RESOLUCION 480*****/
#media (min-width:480px) {
}
/*****RESOLUCION 320*****/
#media (min-width:320px) {
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar</title>
<link rel="icon" href="/images/faviconLogo.ico"/>
<script type="text/javascript" src="/js/speak.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="/stylesheets/nav.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/8431526c8f.js" crossorigin="anonymous"></script>
</head>
<style>
/**Style Sheet - CSS **/
</style>
<body>
<header>
<div id="navbar" class="nav-backgc">
<div class ="container-nav">
<div class ="navbar">
<center>
<img src="/images/logo2.png" alt="BierClub" class="logo">
<ul id ="navcarrito" class="navcarrito">
<li class="search"><a href="#"><i class="fas fa-search" onclick="search()" ></i><!/a></li>
<div class="searchBuscador">
<input type="text" onblur="this.style='display:none;'"
id="search-bar"></input>
</div>
<li><i class="fas fa-shopping-cart"></i></li>
<span><li class="login-carrito"><i class="fas fa-sign-in-alt"></i></li></span>
</ul><strong>
<ul id ="navlogin" class="navlogin">
<li><i class="fas fa-sign-in-alt"></i> Iniciar sesion</li>
</ul></strong>
<hr><img src="/images/logo2.png" alt="BierClub" class="logonav" id="logonav">
<nav>
<ul class="barra"><strong>
<li class="dropdownBoton">Productos
<div class="dropdownMenu">
<a href="#">
<h3>Lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
<a href="#">
<h3>No lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
</div>
</li>
<li>Promociones</li>
<li>Suscribete</li>
<li>Envio</li>
<li>¿Quienes Somos?</li>
</ul></strong>
</nav>
</center>
</div>
</div>
</div>
</header>
<script>
/** Javascript **/
</script>
</body>
</html>

Answer 2

Hover Effect..
/*----------NAV BAR----------*/
body{
margin: 0;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
.nav-backgc{
height:140px;
position: fixed;
width: 100%;
transition: 0.4s;
z-index: 9;
backdrop-filter: blur(1rem);
background-color: #DAA520;
}
.container-nav{
width : 80%;
margin-left:10%;
position:fixed;
z-index:inherit 9;
}
.logonav{
max-width: 65px;
padding: 10px 0px 2px 0px;
position: relative;
float:left;
margin-top: -5px;
display:none;
}
.logo{
max-width: 65px;
padding: 10px 0px 2px 0px;
}
nav{
width: 100%;
padding-bottom: 2px;
}
.navbar ul{
padding: 0;
list-style: none;
}
.navbar li{
display: inline-block;
margin: 0px 25px;
position: relative;
}
.navcarrito span{
display: none;
}
.navbar a{
text-decoration: none;
color: #fff;
}
.navbar a{
color: #fff;
}
.barra{
margin-top: 27px;
}
hr{
opacity:20%
}
.navcarrito.login-carrito{
display: none;
font-size: 18px;
}
.navcarrito{
display: flex;
float:right;
position: fixed;
right: 20%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin{
float:right;
display:flex;
position:fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.navlogin{
float:right;
position:fixed;
right: 1.5%;
margin-top: -35px;
transition: 0.3s;
}
.nav-arriba{
padding-top: 50px;
width: 100%;
}
.nav-arriba a{
text-decoration: none;
}
.nav-arriba ul{
padding: 0;
list-style: none;
}
.nav-arriba li{
display: inline-block;
margin: 0px 25px;
position: relative;
}
.search{
transition: 0.3s;
}
.search:hover{
/* margin-right: 100px; */
}
.searchBuscador{
display:none;/*
position:absolute;*/
}
input:focus{
/* margin-right: 100px;*/
display:block;
}
.search:hover ~ .searchBuscador{
/* display: inline-block;*/
display:block;
}
/* ==========================================================================
DROPDOWN MENU
========================================================================== */
.dropdownMenu{
position: absolute;
display: none;
width: 500px;
background-color: #fff;
border-radius: 7px;
justify-content: space-evenly;
flex-wrap: wrap;
box-shadow: 2px 2px rgba(163, 163, 163, 0.295);
}
.dropdownBoton:hover > .dropdownMenu{
display:flex;
}
.dropdownMenu a{
display: flex;
flex-direction: column;
width: 35%;
color: black;
border-radius: 5px;
margin-block-start: 0.5em;
height: 100px;
}
.dropdownMenu a h3{
margin-block-start: 16px;
margin-block-end: -9.5px;
}
/* ==========================================================================
RESOLUCION 1200-1600
========================================================================== */
#media (min-width: 1024px) and (max-width: 1600px) {
.navlogin li a{
display:none;
}
.navcarrito span{
display: inline-block;
}
.navcarrito{
right: 6%;
}
}
#media (min-width: 1200px) and (max-width: 1300px) {
.navcarrito li{
margin: 0px 15px;
}
}
/*****RESOLUCION 1024*****/
#media (min-width:1024px) {
}
/*****RESOLUCION 768*****/
#media (min-width:768px) {
}
/*****RESOLUCION 480*****/
#media (min-width:480px) {
}
/*****RESOLUCION 320*****/
#media (min-width:320px) {
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>navbar</title>
<link rel="icon" href="/images/faviconLogo.ico"/>
<script type="text/javascript" src="/js/speak.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="/stylesheets/nav.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/8431526c8f.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<div id="navbar" class="nav-backgc">
<div class ="container-nav">
<div class ="navbar">
<center>
<img src="/images/logo2.png" alt="BierClub" class="logo">
<ul id ="navcarrito" class="navcarrito">
<li class="search"><i class="fas fa-search" ></i></li>
<div class="searchBuscador">
<input type="txt" >
</div>
<li><i class="fas fa-shopping-cart"></i></li>
<span><li class="login-carrito"><i class="fas fa-sign-in-alt"></i></li></span>
</ul><strong>
<ul id ="navlogin" class="navlogin">
<li><i class="fas fa-sign-in-alt"></i> Iniciar sesion</li>
</ul></strong>
<hr><img src="/images/logo2.png" alt="BierClub" class="logonav" id="logonav">
<nav>
<ul class="barra"><strong>
<li class="dropdownBoton">Productos
<div class="dropdownMenu">
<a href="#">
<h3>Lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
<a href="#">
<h3>No lupuladas</h3>
<h6>Lorem ipsum dolor sit amet consectetur.</h6>
</a>
</div>
</li>
<li>Promociones</li>
<li>Suscribete</li>
<li>Envio</li>
<li>¿Quienes Somos?</li>
</ul></strong>
</nav>
</center>
</div>
</div>
</div>
</header>
</body>
</html>