Edite as letras destacadas abaixo...
Link da Página... - Edite está Palavra Pelo Link da Página Que você Gostaria.
Nome da Página... - Edite está Palavra Pelo Nome da Página.
#ffffff - Edite este Código Pelo Código da cor Que Você Gostaria de Colocar no menu.
Local - Edite está Palavra Por: Left (Esquerda) Center (Centro) ou Right (Direita)
<style type='text/css'>
#menu{
background: #ffffff;
width:100%;
height:40px;
padding:6px;
text-align:center;
position:fixed;
top:0px;
left:0px;
box-shadow:0 0 6px #66757F;
z-index:8888;
}
#menu .content{
width:1024px;
position:relative;
left:50%;
margin-left:-512px;
margin-top:5px;
}
#menu ul{
margin:4px;
padding:0;
padding-bottom:20px;
}
#menu li{
display:inline;
list-style:none;
padding-bottom:20px;
}
#menu li a{
margin-top: 20px;
color:#000;
padding:25px;
padding-bottom:20px;
font-family: Helvetica;
font-size:17px;
text-decoration:none;
z-index:9999;
}
#menu li a:hover{
color:#059bff;
border-bottom:3px solid #059bff;
padding-bottom:15px;
transition:ALL 0.3s ease;
}
#menu input[type='text']{
background-color:#8E9BA4;
border:1px solid #ffffff;
height: 25px;
color:#fff;
font-family:Arial;
font-size:14px;
padding:3px;
border-radius:20px;
outline:none;
margin-top: -2px;
margin-left: 80px;
}
#menu input[type='text']:focus{
color: #fff;
background-color:#66757F;
box-shadow:0 0 4px #027194;
transition:ALL 0.2s ease;
}
#menu input[type='submit']{
height: 25px;
background-color:#8E9BA4;
color:#fff;
font-family:Arial;
font-size:14px;
padding:4px 6px;
border-radius:5px;
border-width:0;
}
#menu input[type='submit']:hover{
background-color:#66757F;
cursor:pointer;
transition:ALL 0.3s ease;
border:
}
</style>
<div id='menu'>
<div class='content'>
<ul style='float:Local;'>
<li><a href='Link da Página 01'>Nome da Página 01</a></li>
<li><a href='Link da Página 02'>Nome da Página 02</a></li>
<li><a href='Link da Página 03'>Nome da Página 03</a></li>
<li><a href='Link da Página 04'>Nome da Página 04</a></li>
<li><a href='Link da Página 05'>Nome da Página 05</a></li>
</ul>
