#menuBuscador { position: relative; width: 95%; /* Ancho del menú */ height: 40px; padding-left: 14px; background: #CC2A41; /* Color de fondo */ } .menusearch { padding:0; margin:0; list-style:none; position:relative; z-index:5; font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif; } .menusearch li:hover li a { background:none; } .menusearch li.top {display:block; float:left;} .menusearch li a.top_link { display:block; float:left; height:40px; line-height:40px; color:#fff; /* Color de los títulos */ text-decoration:none; font-size:14px; /* Tamaño de la fuente */ padding:0 0 0 12px; cursor:pointer; } .menusearch li a.top_link span { float:left; display:block; padding:0 24px 0 12px; height:40px; } .menusearch li a.top_link span.down { float:left; display:block; padding:0 24px 0 12px; height:40px; } .menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff;} .menusearch li:hover {position:relative; z-index:2;} .menusearch ul, .menusearch li:hover ul ul, .menusearch li:hover ul li:hover ul ul, .menusearch li:hover ul li:hover ul li:hover ul ul, .menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} .menusearch li:hover ul.sub { left:0; top:40px; background:#351330; /* Color de fondo del submenú */ padding:3px; white-space:nowrap; width:200px; height:auto; z-index:3; } .menusearch li:hover ul.sub li { display:block; height:30px; position:relative; float:left; width:200px; font-weight:normal; } .menusearch li:hover ul.sub li a{ display:block; height:30px; width:200px; line-height:30px; text-indent:5px; color:#fff; font-size:14px; text-decoration:none; } .menusearch li ul.sub li a.fly { /* Color de fondo del submenú */ background:#351330 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqG0CV5tIWiQBdMyJGg5ZxmxGhsY3ylreRUjl1qSb_7o16ybo7oMUdgeZdp-57LScMNK7UzMFijWGkunBn0GVs1k6ghLDjX3vFy3AzREKdUoXQBnyko6KBhm1xPQf6c2zGtx04JFLUSsY9/) 185px 10px no-repeat;} .menusearch li:hover ul.sub li a:hover { background:#CC2A41; /* Color de fondo al pasar el cursor */ color:#fff; } .menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > a.fly { /* Color de fondo al pasar el cursor */ background:#CC2A41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqG0CV5tIWiQBdMyJGg5ZxmxGhsY3ylreRUjl1qSb_7o16ybo7oMUdgeZdp-57LScMNK7UzMFijWGkunBn0GVs1k6ghLDjX3vFy3AzREKdUoXQBnyko6KBhm1xPQf6c2zGtx04JFLUSsY9/) 185px 10px no-repeat; color:#fff;} .menusearch li:hover ul li:hover ul, .menusearch li:hover ul li:hover ul li:hover ul, .menusearch li:hover ul li:hover ul li:hover ul li:hover ul, .menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul { left:200px; top:-4px; background: #351330; /* Color de fondo del submenú */ padding:3px; white-space:nowrap; width:200px; z-index:4; height:auto; } #search input[type="text"] { background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0qSacj3UzWNTwUdPFdhLEB4V0gHD35KCZiF27UjDTxmtp33vYwRq0CqVlua9Ikg8UaqFsg0oi-oy5vSfVqiFP4TwQewKFk9ps8kiuOADJW0swA8LZ9QccrtyAa1a6XtkJUQCDTLbqTBc/s32/buscar.png) no-repeat center left; position: absolute; right:3px; /* Distancia del buscador desde la derecha */ outline:none; font-size: 13px; /* Tamaño de la fuente del buscador */ color: #ccc; width: 0; margin: 0; padding: 12px 0 12px 35px; z-index: 1000; border: 1px solid #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #search input[type="text"]:hover, #search input[type="text"]:focus {width:94%} /* Ancho del buscador cuando se expande */
No hay comentarios:
Publicar un comentario