/* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 30px; 
    width: 550px;
    /* el color de fondo */
    background:#fff;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 30px;
    list-style: none;
    margin: 8px 5px 0 0;
    /*padding: 0;*/
    position: relative;
	padding:0;
	background:#CCC;
	border-radius: 5px;
  }
  .mi-menu li a {
    /*border-left: 1px solid #000;*/
    /*border-right: 1px solid #666;*/
	border-bottom: 3px solid #f90;
    color: #000;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    padding: 0 14px 5px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    background: -moz-linear-gradient(#CCC,#999);
    background: -webkit-linear-gradient(#CCC,#999);
    background: -o-linear-gradient(#CCC,#999);
    background: -ms-linear-gradient(#CCC,#999);
    background: linear-gradient(#CCC,#999);
	border-radius: 5px;
	
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { 
  color:#fff;
  text-shadow: 0 2px 1px #333;  
  }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 30px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#CCC,#999);
    background: -webkit-linear-gradient(#CCC,#999);
    background: -o-linear-gradient(#CCC,#999);
    background: -ms-linear-gradient(#CCC,#999);
    background: linear-gradient(#CCC,#999);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 30px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #F90;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { 
  border: none; 
  }
  
  /*MENU PRODUCTOS*/
  
  /* el menú en si mismo */
  .m2-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 30px; 
    width: 550px;
    /* el color de fondo */
    background:#fff;
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .m2-menu  br { display:none; }

  /* cada item del menu */
  .m2-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 30px;
    list-style: none;
    margin: 0 2px 0 0;
    /*padding: 0;*/
    position: relative;
	padding:0;
	background:#FC0;
	border-radius: 5px;
  }
  .m2-menu li a {
    /*border-left: 1px solid #000;*/
    /*border-right: 1px solid #666;*/
	border-bottom: 3px solid #f90;
    color: #fff;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
    padding: 0 14px 2px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    background: -moz-linear-gradient(#FC3,#F90);
    background: -webkit-linear-gradient(#FC3,#F90);
    background: -o-linear-gradient(#FC3,#F90);
    background: -ms-linear-gradient(#FC3,#F90);
    background: linear-gradient(#FC3,#F90);
	border-radius: 5px;
	
  }
  /* eliminamos los bordes del primer y el último */
  .m2-menu li:first-child a { border-left: none; }
  .m2-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .m2-menu li:hover > a { 
  color:#FFF;
  text-shadow: 0 2px 1px #333;  
  }

  /* los submenús */
  .m2-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 30px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#FC3,#F90);
    background: -webkit-linear-gradient(#FC3,#F90);
    background: -o-linear-gradient(#FC3,#F90);
    background: -ms-linear-gradient(#FC3,#F90);
    background: linear-gradient(#FC3,#F90);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .m2-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .m2-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .m2-menu li:hover > ul li {
    height: 30px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .m2-menu ul li a {
    border: none;
    border-bottom: 1px solid #F90;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .m2-menu ul li:last-child a { 
  border: none; 
  }
  


<!--estilos MENU CSS VERTICAL LATERAL-->
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;
	padding:0;
	background-color:#dedede;
	border-width:1px;border-style:solid;
	border-color:#5f5f5f;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;}
ul#css3menu1 ul{
	display:none;
	position:absolute;
	left:0;top:100%;
	-moz-box-shadow:3.5px 3.5px 5px #000000;
	-webkit-box-shadow:3.5px 3.5px 5px #000000;
	box-shadow:3.5px 3.5px 5px #000000;
	background-color:#FFFFFF;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:
	6px;border-color:#d4d4d4;
	padding:0 10px 10px;
	}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	font-size:0;width:100%;z-index:999;position:relative;display:inline-block;zoom:1;padding:0 0%;margin:0 0%;
	*display:inline;*padding-right:1.56%;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1>li{
	margin:0;width:33%;}
ul#css3menu1 li.toplast{
	width:34%;}
body:first-of-type ul#css3menu1{
	display:inline-table;border-spacing:0px 0;}
body:first-of-type ul#css3menu1>li{
	display:table-cell;float:none;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;
	text-align:left;text-decoration:none;
	font:bold 14px Trebuchet MS;color:#ffffff;
	/*text-shadow:#FFF 0 0 1px;cursor:pointer;*/
	padding:10px;background-color:#0055ff;
	background-image:url("mainbk.png");
	background-repeat:repeat;background-position:0 0;
	border-width:0 0 0 1px;
	border-style:solid;
	border-color:#C0C0C0;
	}
ul#css3menu1 ul li{
	float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#06C;
	border-color:#C0C0C0;
	border-style:solid;
	color:#000000;
	/*text-shadow:#FFF 0 0 1px;*/
	background-image:url("mainbk.png");
	background-position:0 100px;
	text-decoration:none;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
	background-image:url("arrowsub.png");padding-right:12px;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li a.pressed{
	background-color:#FFFFFF;background-image:none;color:#0978b3;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
	border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.toplast>a{
	border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}

@-moz-document url-prefix(){body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}
@media only screen and (max-width:192px),only screen and (max-device-width:192px){
ul#css3menu1>li:nth-child(1){width:50%}ul#css3menu1>li:nth-child(2){width:50%}ul#css3menu1>li:nth-child(3){width:100%}body:first-of-type ul#css3menu1{display:inline-block} body:first-of-type ul#css3menu1>li{display:block;float:left !important;}}
@media only screen and (max-width:128px),only screen and (max-device-width:128px){
ul#css3menu1>li:nth-child(1){width:100%}ul#css3menu1>li:nth-child(2){width:100%}ul#css3menu1>li:nth-child(3){width:100%}}

<!--FIN MENU VERTICAL LATERAL-->