hola he estado intentando hacer una copia del menú de apple con html5 y css3. lo que pasa es que cuando he intentado solucionar un error con el tema del icono de la barra del buscador no me funciona, el objetivo que quiero llegar a alcanzar es: que tenga un efecto hover blanco con el icono incluido en esta barra de buscador
lamento enserio si incumplo con las reglas las estudie un poco y creo que estoy bien, si tengo algún error me disculpo
código de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>El KIOSCO</title>
<!------ estilos ------>
<link rel="stylesheet" type="text/css" href="E:\tienda\modelo\css\estilos.css">
<!------- logotipo ----->
<link rel="icon" type="img" href="E:\tienda\modelo\img\logito.png">
<!------ ------>
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<!------ ------>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<!------ ------>
<link rel="stylesheet" href="https://i.icomoon.io/public/temp/3b59cb85ac/UntitledProject/style.css">
</head>
<body>
<header>
<nav class="menu-nav">
<ul class="menu">
<li><a href=""><span class="icon-house"></span></a></li>
<li><a href="">Nosotros</a></li>
<li><a href="">Producto</a></li>
<li><a href="">Contacto</a></li>
<li><a href="">Registro</a></li>
</ul>
<div class="search_bar">
<a href="#" class="icon-search"></a>
<input type="text" id="bar">
</div>
</nav>
</header>
<!------------------ fin menu --------------->
</body>
este es el código HTML que tengo, no creo tener el error allí sino en el código CSS aquí se los dejo:
*{
margin: 0;
padding: 0;
}
ul, ol{
list-style: none;
}
header{
width: 100%;
}
.menu-nav {
width: 1000px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
background: #979797;
border-bottom: 1px solid #555555;
background: #8b8b8b;
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: rgb (139,139,139);</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: -moz-linear-gradient (top, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100% );</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: -webkit-linear-gradient (top, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100% );</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">fondo: gradiente lineal (hacia abajo, rgba (139,139,139,1) 0%, rgba (106,106,106,1) 49%, rgba (94,94,94,1) 51%, rgba (113,113,113,1) 100%);</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">filtro: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 8b8b8b', endColorstr = '# 717171', GradientType = 0);</font></font>
}
.menu {
width: 85%;
display: table;
table-layout: fixed;
float: left;
}
.menu li {
display: table-cell;
overflow: hidden;
width: 100%;
border-right: 1px solid #5c5c5c;
border-left: 1px solid rgba(255,255,255,.2);
}
.menu li:first-child {
border-left: none;
}
.menu li:first-child:hover {
border-left: none;
}
.menu li a {
color: #fff;
display: block;
font-family: arial;
font-size: 14px;
padding: 10px 0;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0px rgba(0,0,0.5);
}
.menu li:hover {
background: rgb(0,0,0.5);
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: none;
}
.menu li:active {
background: rgba(0,0,0,.3);
box-shadow: inset 0px 3px 2px rgba(0,0,0,1);
}
.search_bar {
width: 15%;
float: left;
padding: 7px 10px;
box-sizing: border-box;
position: relative;
}
.search_bar input {
width: 100%;
height: auto;
border-radius: 50px;
border: none;
border-bottom: 1px solid #585858;
padding: 0px 10px 0px 25px;
box-sizing: border-box;
height: 22px;
box-shadow: inset 0px 1px 3px rgba(0,0,0.7);
background: #7E7E7E;
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">color de fondo: rgb (126,126,126);</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@incluye gradiente de filtro (# 7e7e7e, # 767676, vertical);</font></font>
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">@incluir imagen de fondo (gradiente lineal (arriba, rgba (126,126,126,1) 0%, rgba (121,121,121,1) 50%, rgba (110,110,110,1) 52%, rgba (118,118,118,1) 100%);</font></font>
}
.search_bar input:focus {
background: #fff;
box-shadow: none;
}
.icon-house {
display: block;
position: relative;
top: 2px;
}
.icon-search {
position: absolute;
bottom: 10px;
left: 15px;
color: #fff;
text-decoration: none;
}