Estilos pre-definidos – Menú Horizontal para Blogger y otros

Esta entrada es complementaria de Menú Horizontal para Blogger y otros.  En esta te presento  códigos CSS que puedes utilizar para reemplazar si deseas un estilo diferente en cuanto a forma y tono de los elementos del menú.

Tienes 3 estilos predefinidos de acuerdo a la forma pero puedes editarlos realizando pequeñas modificaciones, adaptándolo al estilo de tu sitio.

Las imágenes te muestran el tono pre-definido y a continuación el código CSS.

Copia el estilo que elijas y regresa a la entrada Menú Horizontal para Blogger y otros  para que continúes con los pasos. (Te aconsejo que dejes esta pestaña abierta)

 

BOTONES CON SOMBRA

---

Estilo de menú #1.

BOTONES CON SOMBRA (TONO AZUL)

El código CSS es el siguiente:

/* MENÚ CSS HORIZONTAL BOTONES CON SOMBRA (TONO AZUL)   */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF solid;
background-color: #0000FF;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #0000FF;
background-image: none;
border: 0px #FFFFFF solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #0000FF;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 1px;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #2.

BOTONES CON SOMBRA (TONO MELÓN)

El código CSS es el siguiente:

/* MENÚ CSS HORIZONTAL BOTONES CON SOMBRA (TONO MELON)   */
#CssMenu1
{
border: 0px #FF4500 solid;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 1px #CCCCCC solid;
background-color: #DEB887;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #BC9A67;
background-image: none;
border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC solid;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 solid;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #3.

BOTONES CON SOMBRA (TONO GRIS)

El código CSS para definir el estilo es el siguiente:

/* MENU CSS HORIZONTAL BOTONES CON SOMBRA (TONO GRIS)   */
#CssMenu1
{
   border: 0px #C0C0C0 solid;
   background-color: #C0C0C0;
}
#CssMenu1 ul
{
   list-style-type: none;
   margin: 0;
   padding: 0;
}
#CssMenu1 li
{
   float: left;
   margin: 0;
   padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
   display: block;
   float: left;
   color: #000000;
   border: 1px #CCCCCC solid;
   background-color: #DCDCDC;
   background-image: none;
   font-family: Arial;
   font-weight: bold;
   font-size: 13px;
   font-style: normal;
   text-decoration: none;
   height: 26px;
   line-height: 26px;
   padding: 0px 5px 0px 5px;
   vertical-align: middle;
   text-align: center;
   -moz-box-shadow: 2px 2px 0px #454545;
   -webkit-box-shadow: 2px 2px 0px #454545;
   box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
   color: #FFFFFF;
   background-color: #4F4F4F;
   background-image: none;
   border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
   padding-left: 10px;
}
#CssMenu1 li.lastmain
{
   padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
   position: relative;
}
#CssMenu1 a.withsubmenu
{
   padding: 0 5px 0 5px;
   background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
   background-image: none;
}
#CssMenu1 ul ul
{
   position: absolute;
   left: 0;
   top: 0;
   visibility: hidden;
   width: 160px;
   height: auto;
   border: none;
   background-color: #FFFFFF;
   -moz-box-shadow: 2px 2px 0px #454545;
   -webkit-box-shadow: 2px 2px 0px #454545;
   box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 ul :hover ul
{
   left: 0px;
   top: 36px;
   padding-top: 0px;
   visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
   left: 4px;
}
#CssMenu1 li li
{
   width: 160px;
   padding: 0 0px 0px 0px;
   border: 0px #C0C0C0 solid;
   border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
   border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
   border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
   float: none;
   margin: 0;
   width: 148px;
   height: auto;
   white-space: normal;
   padding: 8px 6px 7px 6px;
   background-color: #4F4F4F;
   background-image: none;
   border: 0px #CCCCCC solid;
   color: #F5F5F5;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   font-style: normal;
   line-height: 13px;
   text-align: left;
   text-decoration: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
   margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
   background-color: #000000;
   background-image: none;
   border: 0px #696969 solid;
   color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
   width: 150px;
   padding: 8px 5px 7px 5px;
   background-image: url(images/flechasubmenuwhite.png);
   background-repeat: no-repeat;
   background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
   background-image: url(images/flechasubmenuwhite.png);
   background-repeat: no-repeat;
   background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
   position: absolute;
   left: 0;
   top: 0;
   visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
   left: 160px;
   top: 0px;
   visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
   top: 0px;
}
#CssMenu1 br
{
   clear: both;
   font-size: 1px;
   height: 0;
   line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

FORMATO PLANO

---

Estilo de menú #1.

FORMATO PLANO (TONO CELESTE)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL FORMATO PLANO (TONO CELESTE)   */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF none;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: transparent;
background-image: none;
border: 0px #FFFFFF none;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #1E90FF;
background-image: none;
border: 0px #CCCCCC none;
border-radius: 0px;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 none;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #2.

FORMATO PLANO (TONO GRIS)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL FORMATO PLANO (TONO GRIS)   */
#CssMenu1
{
border: 0px #C0C0C0 solid;
background-color: #C0C0C0;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC solid;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #FFFFFF;
background-color: transparent;
background-image: none;
border: 0px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: #FFFFFF;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #4F4F4F;
background-image: none;
border: 0px #CCCCCC solid;
color: #F5F5F5;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #3.

FORMATO PLANO (TONO MELÓN)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL FORMATO PLANO (TONO MELÓN)   */
#CssMenu1
{
border: 0px #FF4500 solid;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC none;
background-color: transparent;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: transparent;
background-image: none;
border: 0px #696969 none;
}
#CssMenu1 li.firstmain
{
padding-left: 4px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #C0C0C0 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 0px #C0C0C0 solid;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC none;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 none;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:7px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

BOTONES REDONDEADOS

---

Estilo de menú #1.

BOTONES REDONDEADOS (TONO GRIS)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO GRIS)   */
#CssMenu1
{
border: 0px #C0C0C0 solid;
border-radius: 10px;
background-color: #C0C0C0;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 1px #CCCCCC solid;
border-radius: 10px;
background-color: #DCDCDC;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 26px;
line-height: 26px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #FFFFFF;
background-color: #4F4F4F;
background-image: none;
border: 1px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #4F4F4F solid;
-moz-border-top-left-radius: 7px;
-webkit-border-top-left-radius: 7px;
border-top-left-radius: 7px;
-moz-border-top-right-radius: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #4F4F4F solid;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #4F4F4F;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #F5F5F5;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #2.

BOTONES REDONDEADOS (TONO AZUL)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO AZUL)   */
#CssMenu1
{
border: 0px #C0C0C0 solid;
border-radius: 10px;
background-color: #1E90FF;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #FFFFFF;
border: 0px #FFFFFF solid;
border-radius: 10px;
background-color: #0000FF;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #454545;
-webkit-box-shadow: 2px 2px 0px #454545;
box-shadow: 2px 2px 0px #454545;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #0000FF;
background-image: none;
border: 0px #FFFFFF solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #0000FF solid;
-moz-border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #0000FF solid;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #0000FF;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #FFFFFF;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #000000;
background-image: none;
border: 0px #696969 solid;
color: #FFFFFF;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenuwhite.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Estilo de menú #3.

BOTONES REDONDEADOS (TONO MELÓN)

El código CSS es el siguiente:

/* MENU CSS HORIZONTAL BOTONES REDONDEADOS (TONO MELON)   */
#CssMenu1
{
border: 0px #FF4500 solid;
border-radius: 10px;
background-color: #CDA778;
}
#CssMenu1 ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
#CssMenu1 li
{
float: left;
margin: 0;
padding: 4px 4px 4px 0px;
}
#CssMenu1 a
{
display: block;
float: left;
color: #000000;
border: 0px #CCCCCC solid;
border-radius: 10px;
background-color: #DEB887;
background-image: none;
font-family: Arial;
font-weight: bold;
font-size: 13px;
font-style: normal;
text-decoration: none;
height: 28px;
line-height: 28px;
padding: 0px 5px 0px 5px;
vertical-align: middle;
text-align: center;
-moz-box-shadow: 2px 2px 0px #565656;
-webkit-box-shadow: 2px 2px 0px #565656;
box-shadow: 2px 2px 0px #565656;
}
#CssMenu1 li:hover a, #CssMenu1 a:hover
{
color: #000000;
background-color: #BC9A67;
background-image: none;
border: 0px #696969 solid;
}
#CssMenu1 li.firstmain
{
padding-left: 10px;
}
#CssMenu1 li.lastmain
{
padding-right: 4px;
}
#CssMenu1 li:hover, #CssMenu1 li a:hover
{
position: relative;
}
#CssMenu1 a.withsubmenu
{
padding: 0 5px 0 5px;
background-image: none;
}
#CssMenu1 li:hover a.withsubmenu, #CssMenu1 a.withsubmenu:hover
{
background-image: none;
}
#CssMenu1 ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
width: 160px;
height: auto;
border: none;
background-color: transparent;
}
#CssMenu1 ul :hover ul
{
left: 0px;
top: 36px;
padding-top: 0px;
visibility: visible;
}
#CssMenu1 .firstmain:hover ul
{
left: 4px;
}
#CssMenu1 li li
{
width: 160px;
padding: 0 0px 0px 0px;
border: 0px #C0C0C0 solid;
border-width: 0 0px;
}
#CssMenu1 li li.firstitem
{
border-top: 0px #BC9A67 solid;
}
#CssMenu1 li li.lastitem
{
border-bottom: 5px #BC9A67 solid;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#CssMenu1 ul ul a, #CssMenu1 ul :hover ul a, #CssMenu1 ul :hover ul :hover ul a
{
float: none;
margin: 0;
width: 148px;
height: auto;
white-space: normal;
padding: 8px 6px 7px 6px;
background-color: #BC9A67;
background-image: none;
border: 0px #CCCCCC solid;
border-radius: 0;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
font-style: normal;
line-height: 13px;
text-align: left;
text-decoration: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#CssMenu1 ul :hover ul .firstitem a, #CssMenu1 ul :hover ul :hover ul .firstitem a
{
margin-top: 0px;
}
#CssMenu1 ul ul :hover a, #CssMenu1 ul ul a:hover, #CssMenu1 ul ul :hover ul :hover a, #CssMenu1 ul ul :hover ul a:hover, #CssMenu1 ul ul :hover ul :hover ul :hover a, #CssMenu1 ul ul :hover ul :hover ul a:hover
{
background-color: #DEB887;
background-image: none;
border: 0px #696969 solid;
color: #000000;
}
#CssMenu1 ul ul a.withsubmenu, #CssMenu1 ul :hover ul a.withsubmenu, #CssMenu1 ul :hover ul :hover ul a.withsubmenu
{
width: 150px;
padding: 8px 5px 7px 5px;
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover, #CssMenu1 ul ul :hover ul :hover a.withsubmenu, #CssMenu1 ul ul a.withsubmenu:hover a.withsubmenu:hover
{
background-image: url(images/flechasubmenublack.png);
background-repeat: no-repeat;
background-position: right center;
}
#CssMenu1 ul :hover ul ul, #CssMenu1 ul :hover ul :hover ul ul
{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
#CssMenu1 ul :hover ul :hover ul, #CssMenu1 ul :hover ul :hover ul :hover ul
{
left: 160px;
top: 0px;
visibility: visible;
}
#CssMenu1 ul :hover ul .firstitem:hover ul, #CssMenu1 ul :hover ul :hover ul .firstitem:hover ul
{
top: 0px;
}
#CssMenu1 br
{
clear: both;
font-size: 1px;
height: 0;
line-height: 0;
}

/* Contenedor Formulario de busqueda  */
#search {
width: 200px; /* Ancho del buscador */
height: 26px;
float: right;
text-align: center;
margin-top: 4px;
margin-right: 6px;
background:#ffffff;
border-radius:20px;
border-style:inset;
}

/* Caja de busqueda  */
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

 

---

Recuerda que puedes editar el CSS, de acuerdo a los colores y fuentes de tu sitio.

Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas  <style >  y  </style>, por ejemplo:

<style type="text/css">
...Aquí pegas código CSS...
</style>
</head>

En Blogger, también puedes hacerlo, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones:

1. Tema (o Diseño)
2. Personalizar (o Diseñador de temas)
3. Opciones avanzadas
4. Agregar CSS (aparece como última opción en el menú desplegable que comienza con texto de la página)

---