MENU HORIZONTAL COM SUBMENU E CAIXA DE BUSCA

O seguinte menu é feito unicamente com CSS, é um menu horizontal com sub-menu, e do lado direito tem uma caixa de busca.

É um menu prático para os que não querem lidar com menus muito complexos ou preferem não usar um que requer scripts para funcionar ou que tenha muitas imagens.

A instalação e personalização é bastante simples, e é bastante funcional, já que tendo a caixa de busca integrada você terá dois elementos em uma mesma área.

Você pode vê-lo funcionando neste blog de testes, se você quiser testar a caixa de busca digite a palavra que desejar e pressione  ENTER.

Passos para instalar o menu

Vá em design >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e coloque-o antes de ]]></b:skin> 

/* Menu horizontal com buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Tamanho do menu */
height:40px;
padding-left:14px;
background:#444; /* Cor de fundo */
border-radius:5px; /* Bordas aredondadas */
}
.menu {
width: 100%;
float: left;
font-family:"Arial", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:14px; /* Tamanho da fonte */
font-weight:bold;
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 5px 5px; /* Bordas aredondadas do sub-menu */
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
border-right: 1px solid #666;
color:#cccccc; /* Color de la fuente */
display:block;text-transform:uppercase;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Cor das casas ao passar o cursor */
color:#FFFFFF; /* Cor do texto ao passar o cursor */
text-decoration:none;
}
.menu li ul {
background:#333333; /* Cor de fundo do sub-menu */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Tamanho do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
border-radius: 0px 0px 5px 5px; /* Borda das sub-casas */
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Cor das sub-casas ao passar o cursor */
color:#ffffff;
text-decoration:none;
}

#search {
width: 228px; /* Tamanho da caixa de busca */
height: 24px;
float: right;
text-align: center;
margin-top: 8px;
margin-right: 6px;
background: #fff;/* Cor de fundo da caixa de busca */
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Vá até 'design' → 'Elementos de página' → Clique em 'Adicionar um elemento de página'→ Escolha tipo 'HTML/Javascript' e cole o seguinte código:

<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="URL">Home</a></li>
<li><a href="#">Casa 2</a>
<ul>
<li><a href="URL">Casa 2.1</a></li>
<li><a href="URL">Casa 2.2</a></li>
<li><a href="URL">Casa 2.3</a></li>
<li><a href="URL">Casa 2.4</a></li>
</ul>
</li>
<li><a href="#">Casa 3</a>
<ul>
<li><a href="URL">Casa 3.1</a></li>
<li><a href="URL">Casa 3.2</a></li>
<li><a href="URL">Casa 3.3</a></li>
<li><a href="URL">Casa 3.4</a></li>
</ul>
</li>

<li><a href="#">Casa 4</a>
<ul>
<li><a href="URL">Casa 4.1</a></li>
<li><a href="URL">Casa 4.2</a></li>
<li><a href="URL">Casa 4.3</a></li>
<li><a href="URL">Casa 4.4</a></li>
</ul>
</li>

</ul>

<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>

</div></div>

Adicione as URLS onde indicado, bem como o nome da casa.

No primeiro código estão as áreas que podem ser personalizadas, como a cor de fundo, fonte, tamanho e etc.

O desenho arredondado de todo o menu também é puro CSS, portanto se você estiver usando um navegador antigo você não verá essas bordas.