http://www.ciudadblogger.com/2013/03/menu-horizontal-con-subpestanas-ybuscador-integrado-2.

html
Men
<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pagina
principal</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Acerca de

mi</span></a>
</li>

<li class='top'><a class='top_link' href='#'><span

class='down'>Portafolio</span></a>
<ul class='sub'>
<li><a href='URL del enlace'>Pestaa 3.1</a></li>
<li><a href='URL del enlace'>Pestaa 3.2</a></li>
<li><a href='URL del enlace'>Pestaa 3.3</a></li>
<li><a href='URL del enlace'>Pestaa 3.4</a></li>
</ul>
</li>

<li class='top'><a class='top_link' href='#'><span

class='down'>Contato</span></a>
</li>

<!-- Buscador -->

<li>
<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>
</li>

</ul>
</div>

/* encabezado
----------------------------------------------- */

.header .widget {
text-align:center;}
.header img {margin:0 auto;}

.header{
display: block;
width:100%;
padding: 2px 4px;
background: #dedede;

min-width:980px;
}

.header{

margin: 0 auto;

position: relative;
top:0;
width:800px;
height:100px;
background-color:#333;

color:#FFFFFF;
padding:10px;

margin: 0 0 0 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
1.

margin: 0 auto;

1.

margin-top: 0px;

2.

margin-right: auto;

3.

margin-bottom: 0px;

4.

margin-left: auto;

body .navbar {
height: 0px;
padding: 0;
margin: 0;

https://www.pinterest.com/source/fvsj.deviantart.com/