I wanted to know how to set the search box in the menu !!
The designe of the menu with the box:
My code:
.nav{
width:100%;
height:42px;
background-color:#4682B4;
font-family:arial;
font-size:1.000em;
color:#fff;
float:left;
}
.menu{
margin: 0 auto;
width: 88%;
margin-left:11.23046875%;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position:relative;
min-width: 200px;
z-index:99;
}
.nav ul li{
display: inline-block;
}
.nav ul li:hover{
background-color: #000;
}
.nav ul li a, visited{
color: #fff;
display: block;
padding: 0.813em;
text-decoration: none;
}
.nav ul li:hover ul{
display: block;
}
.nav ul ul {
display:none;
position:absolute;
background-color: #222;
}
.nav ul ul li {
display: block;
}
.nav ul ul li a:hover{
color: #fff;
}
.img-menu{
display:none;
}
/*-----------Config. da caixa de pesquisa------------*/
.search{
width:130px;
height:33px;
top:-2px;
right:-2px;
outline:none;
border:none;
background:#222;
color:#FFF;
position:relative;
font-size:16px;
}
.btn-busca{
width:33px;
height:35px;
outline:none;
border:none;
background:#FF7F00;
cursor:pointer;
top:2px;
left:-4px;
position:relative;
}
<div class="nav">
<div class="img-menu"><img src="img/icn-menu.png"/></div>
<div class="menu">
<ul>
<li><a href="Index.html">Home</a>
</li>
<li> <a href="#">Games</a>
<ul>
<li><a href="#">Gameplays</a>
</li>
<li><a href="#">Reviews</a>
</li>
<li><a href="#">Dicas</a>
</li>
<li><a href="#">Trailers</a>
</li>
</ul>
</li>
<li> <a href="#">Downloads</a>
<ul>
<li><a href="#">Games</a>
</li>
<li><a href="#">Editor de Imagens</a>
</li>
<li><a href="#">Editor de Áudio e Vídeo</a>
</li>
<li><a href="#">Segurança</a>
</li>
<li><a href="#">Sistemas Oprecionais</a>
</li>
<li><a href="#">Os Mais Baixados</a>
</li>
</ul>
</li>
<li> <a href="#">Mobile</a>
<ul>
<li><a href="#">Android</a>
</li>
<li><a href="#">IOS</a>
</li>
<li><a href="#">Windows Phone</a>
</li>
<li><a href="#">Dicas</a>
</li>
</ul>
</li>
<li> <a href="#">Internet</a>
<ul>
<li><a href="#">Redes Socias</a>
</li>
<li><a href="#">Dicas</a>
</li>
</ul>
</li>
<li> <a href="#">Diversão</a>
<ul>
<li><a href="#">Filmes</a>
</li>
<li><a href="#">Animes/desenhos</a>
</li>
<li><a href="#">Memes</a>
</li>
<li><a href="#">Histórias bisarras</a>
</li>
</ul>
<li> <a href="#">TI</a>
<ul>
<li><a href="#">Progamção</a>
</li>
<li><a href="#">Tutorias</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<form class="searchbox" action="busca.html" method="get">
<input class="search" type="text" placeholder="Buscar...">
<button class="btn-busca"><img src="img/tb-lupa.png"/></button>
</form>