/* 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;
}
mais detalhes dos comandos no leiame!
0 comentários:
Postar um comentário