Gadget:Menu desplegable animado con CSS3 y Jquery

La tecnología a llevado al punto en el que las personas ya pueden ver sitios web por medio de smarth phones y tablets, tambien iPods, iPhones y iPads.
asi que las personas quieren que sus sitios sean perfectamente visibles en dispositivos moviles.
Aqui les traigo un menu desplegable que es completamente visible en dispositivos moviles y es animado.

Para los que usan plantillas del diseñador de plantilla primero deben hacer lo que dice en la siguiente entrada, Poner cualquier menu en las plantillas del diseñador de Blogger

El menu realmente se verá así: VER EJEMPLO

Ve a Plantilla, luego a Edicion de HTML.
Busca la etiqueta ]]></b:skin>, y encima de ella agrega lo siguiente.

/* Menu desplegable por Red-Team-Design */
   #menu, #menu ul {
       margin: 0;
       padding: 0;
       list-style: none;
   }

   #menu {
       width: 100%;
       margin: 60px auto;
       border: 1px solid #222;
       background-color: #111;
       background-image: -moz-linear-gradient(#444, #111);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
       background-image: -webkit-linear-gradient(#444, #111);
       background-image: -o-linear-gradient(#444, #111);
       background-image: -ms-linear-gradient(#444, #111);
       background-image: linear-gradient(#444, #111);
       -moz-border-radius: 6px;
       -webkit-border-radius: 6px;
       border-radius: 6px;
       -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
   }

   #menu:before,
   #menu:after {
       content: "";
       display: table;
   }

   #menu:after {
       clear: both;
   }

   #menu {
       zoom:1;
   }

   #menu li {
       float: left;
       border-right: 1px solid #222;
       -moz-box-shadow: 1px 0 0 #444;
       -webkit-box-shadow: 1px 0 0 #444;
       box-shadow: 1px 0 0 #444;
       position: relative;
   }

   #menu a {
       float: left;
       padding: 12px 30px;
       color: #999;
       text-transform: uppercase;
       font: bold 12px Arial, Helvetica;
       text-decoration: none;
       text-shadow: 0 1px 0 #000;
   }

   #menu li:hover > a {
       color: #fafafa;
   }

   *html #menu li a:hover { /* IE6 only */
       color: #fafafa;
   }

   #menu ul {
       margin: 20px 0 0 0;
       _margin: 0; /*IE6 only*/
       opacity: 0;
       visibility: hidden;
       position: absolute;
       top: 38px;
       left: 0;
       z-index: 1;
       background: #444;
       background: -moz-linear-gradient(#444, #111);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
       background: -webkit-linear-gradient(#444, #111);
       background: -o-linear-gradient(#444, #111);
       background: -ms-linear-gradient(#444, #111);
       background: linear-gradient(#444, #111);
       -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
       -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
       box-shadow: 0 -1px 0 rgba(255,255,255,.3);
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       -webkit-transition: all .2s ease-in-out;
       -moz-transition: all .2s ease-in-out;
       -ms-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
       transition: all .2s ease-in-out;
   }

   #menu li:hover > ul {
       opacity: 1;
       visibility: visible;
       margin: 0;
   }

   #menu ul ul {
       top: 0;
       left: 150px;
       margin: 0 0 0 20px;
       _margin: 0; /*IE6 only*/
       -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
       box-shadow: -1px 0 0 rgba(255,255,255,.3);
   }

   #menu ul li {
       float: none;
       display: block;
       border: 0;
       _line-height: 0; /*IE6 only*/
       -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
       box-shadow: 0 1px 0 #111, 0 2px 0 #666;
   }

   #menu ul li:last-child {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
       box-shadow: none;
   }

   #menu ul a {
       padding: 10px;
       width: 130px;
       _height: 10px; /*IE6 only*/
       display: block;
       white-space: nowrap;
       float: none;
       text-transform: none;
   }

   #menu ul a:hover {
       background-color: #0186ba;
       background-image: -moz-linear-gradient(#04acec, #0186ba);
       background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
       background-image: -webkit-linear-gradient(#04acec, #0186ba);
       background-image: -o-linear-gradient(#04acec, #0186ba);
       background-image: -ms-linear-gradient(#04acec, #0186ba);
       background-image: linear-gradient(#04acec, #0186ba);
   }

   #menu ul li:first-child > a {
       -moz-border-radius: 3px 3px 0 0;
       -webkit-border-radius: 3px 3px 0 0;
       border-radius: 3px 3px 0 0;
   }

   #menu ul li:first-child > a:after {
       content: '';
       position: absolute;
       left: 40px;
       top: -6px;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
       border-bottom: 6px solid #444;
   }

   #menu ul ul li:first-child a:after {
       left: -6px;
       top: 50%;
       margin-top: -6px;
       border-left: 0;
       border-bottom: 6px solid transparent;
       border-top: 6px solid transparent;
       border-right: 6px solid #3b3b3b;
   }

   #menu ul li:first-child a:hover:after {
       border-bottom-color: #04acec;
   }

   #menu ul ul li:first-child a:hover:after {
       border-right-color: #0299d3;
       border-bottom-color: transparent;
   }

   #menu ul li:last-child > a {
       -moz-border-radius: 0 0 3px 3px;
       -webkit-border-radius: 0 0 3px 3px;
       border-radius: 0 0 3px 3px;
   }

   /* Mobile */
   #menu-trigger {
       display: none;
   }

   @media screen and (max-width: 600px) {

       /* nav-wrap */
       #menu-wrap {
           position: relative;
       }

       #menu-wrap * {
           -moz-box-sizing: border-box;
           -webkit-box-sizing: border-box;
           box-sizing: border-box;
       }

       /* menu icon */
       #menu-trigger {
           display: block; /* show menu icon */
           height: 40px;
           line-height: 40px;
           cursor: pointer;
           padding: 0 0 0 35px;
           border: 1px solid #222;
           color: #fafafa;
           font-weight: bold;
           background-color: #111;
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
           background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
           -moz-border-radius: 6px;
           -webkit-border-radius: 6px;
           border-radius: 6px;
           -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
           -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
           box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
       }

       /* main nav */
       #menu {
           margin: 0; padding: 10px;
           position: absolute;
           top: 40px;
           width: 100%;
           z-index: 1;
           background-color: #444;
           display: none;
           -moz-box-shadow: none;
           -webkit-box-shadow: none;
           box-shadow: none;
       }

       #menu:after {
           content: '';
           position: absolute;
           left: 25px;
           top: -8px;
           border-left: 8px solid transparent;
           border-right: 8px solid transparent;
           border-bottom: 8px solid #444;
       }

       #menu ul {
           position: static;
           visibility: visible;
           opacity: 1;
           margin: 0;
           background: none;
           -moz-box-shadow: none;
           -webkit-box-shadow: none;
           box-shadow: none;
       }

       #menu ul ul {
           margin: 0 0 0 20px !important;
           -moz-box-shadow: none;
           -webkit-box-shadow: none;
           box-shadow: none;
       }

       #menu li {
           position: static;
           display: block;
           float: none;
           border: 0;
           margin: 5px;
           -moz-box-shadow: none;
           -webkit-box-shadow: none;
           box-shadow: none;
       }

       #menu ul li{
           margin-left: 20px;
           -moz-box-shadow: none;
           -webkit-box-shadow: none;
           box-shadow: none;
       }

       #menu a{
           display: block;
           float: none;
           padding: 0;
           color: #999;
       }

       #menu a:hover{
           color: #fafafa;
       }

       #menu ul a{
           padding: 0;
           width: auto;
       }

       #menu ul a:hover{
           background: none;
       }

       #menu ul li:first-child a:after,
       #menu ul ul li:first-child a:after {
           border: 0;
       }

   }

   @media screen and (min-width: 600px) {
       #menu {
           display: block !important;
       }
   }

   /* iPad */
   .no-transition {
       -webkit-transition: none;
       -moz-transition: none;
       -ms-transition: none;
       -o-transition: none;
       transition: none;
       opacity: 1;
       visibility: visible;
       display: none;
   }

   #menu li:hover > .no-transition {
       display: block;
   }

Ahora busca la etiqueta </head>, y encima de ella pega lo siguiente.

<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script type='text/javascript'>
// IJ tutorials //<![CDATA[
    $(function() {
       if ($.browser.msie && $.browser.version.substr(0,1)<7)
       {
       $('li').has('ul').mouseover(function(){
           $(this).children('ul').css('visibility','visible');
           }).mouseout(function(){
           $(this).children('ul').css('visibility','hidden');
           })
       }

       /* Mobile */
       $('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
       $("#menu-trigger").on("click", function(){
           $("#menu").slideToggle();
       });

       // iPad
       var isiPad = navigator.userAgent.match(/iPad/i) != null;
       if (isiPad) $('#menu ul').addClass('no-transition');
    });
//]]>
</script>

Verás que el CSS es largo, pero es porque hace una adaptacion del menu para tablets, iPads y dispositivos moviles.
Guarda los cambios.
Ahora ve a Diseño, y agrega un gadget HTML/Javascript, y en el pega lo siguiente.

<nav id="menu-wrap">
<ul id="menu">
<li><a href="/">Inicio</a></li>
<li>
<a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Subpestaña 2.1</a>
<ul>
<li><a href="#">Subpestaña 2.1.1</a></li>
<li><a href="#">Subpestaña 2.1.2</a></li>
<li><a href="#">Subpestaña 2.1.3</a></li>
<li><a href="#">Subpestaña 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Subpestaña 2.2</a>
<ul>
<li><a href="#">Subpestaña 2.2.1</a></li>
<li><a href="#">Subpestaña 2.2.2</a></li>
<li><a href="#">Subpestaña 2.2.3</a></li>
<li><a href="#">Subpestaña 2.2.4</a></li>
</ul>
</li>
<li><a href="#">Subpestaña 2.3</a></li>
<li><a href="#">Subpestaña 2.4</a></li>
</ul>
</li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Subpestaña 3.1</a>
<ul>
<li><a href="#">Subpestaña 3.1.1</a>
<ul>
<li><a href="#">Subpestaña 3.1.1.1</a></li>
<li><a href="#">Subpestaña 3.1.1.2</a></li>
<li><a href="#">Subpestaña 3.1.1.3</a></li>
</ul></li>
<li><a href="#">Subpestaña 3.1.2</a></li>
<li><a href="#">Subpestaña 3.1.3</a></li>
</ul>
</li>
<li><a href="#">Subpestaña 3.2</a></li>
<li><a href="#">Subpestaña 3.3</a></li>
</ul>
</li>
</ul>
</nav>

el #, es donde pondrás el enlace de la pestaña, subpestaña y sub de subpestañas.
Lo que ves de Rojo, es donde pondrás el nombre de la pestaña.
Lo que ves de Rojo Oscuro, es donde pondrás el nombre de la subpestaña.
Lo que ves de Rojo Claro, es donde pondrás el nombre de la Subpestaña de 3er nivel.
Lo que ves de Rojo Medio, es donde pondrás el nombre de la Subpestaña de 4º nivel.
Si quieres añadir una pestaña, solo agrega lo siguiente antes de </ul>.

<li><a href="#">Pestaña</a></li>

Si quieres añadir una pestaña con subpestañas, solo agrega lo siguiente antes de </ul>.

<a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Subpestaña 1</a></li>
<li><a href="#">Subpestaña 2</a></li>
<li><a href="#">Subpestaña 3</a></li>
</ul>

Si quieres añadir una subpestaña solo tienes que poner lo siguientes antes del </ul> de la pestaña correspondiente.

<li><a href="#">Subpestaña 3</a></li>

Si quieres añadir una subpestaña con mas subpestañas, solo tienes que agregar lo siguiente antes del </ul> de la pestaña correspondiente.

<li><a href="#">Subpestaña 2.2</a>
<ul>
<li><a href="#">Subpestaña 2.2.1</a></li>
</ul>
</il>

Como usar el menu

Es facil añadir una subpestaña a una pestaña, o agregar subpestañas a las subpestañas.
Una pestaña la verás así.

<li><a href="#">Pestaña</a></li>

En la cual en el # agregas el enlace de la pestaña y lo rojo es donde se agregará el nombre de la pestaña. así.

<li><a href="http://futudownloads.blogspor.com/artists">Artistas</a></li>

o si es en el mismo sitio puedes poner solo el enlace despues del diagonal del dominio /. así.

<li><a href="/artists">Artistas</a></li>

Para agregarle una subpestaña a dicha pestaña, solo hay que bajar la etiqueta </li> de la pestaña, y encima de ella poner <ul> y </ul>.

<li><a href="/artists">Artistas</a>
<ul>
</ul>

</li>

y entre <ul> y </ul> se agregará la subpestaña que basicamente es el mismo codigo que la pestaña.

<li><a href="/artists">Artistas</a>
<ul>
<li><a href="/artists/kpop">K-Pop</a></li>
<li><a href="/artists/jpop">J-Pop</a></li>
<li><a href="/artists/alternative">Alternativo</a></li>
</ul>

</li>

Así tambien si se quiere agregar una subpestaña a la subpestaña solo hay que tomar la misma accion. Bajar la etiqueta </li> de la subpestaña correspondiente y agregando <ul> y </ul>.así.

<li><a href="/artists">Artistas</a>
<ul>
<li><a href="/artists/kpop">K-Pop</a>
<ul>
</ul>

</li>
<li><a href="/artists/jpop">J-Pop</a></li>
<li><a href="/artists/alternative">Alternativo</a></li>
</ul>

</li>

Y entre <ul> y </ul> se agrega la subpestaña a la subpestaña que basicamente es la misma de la pestaña y subpestaña.

<li><a href="/artists">Artistas</a>
<ul>
<li><a href="/artists/kpop">K-Pop</a>
<ul>
<li><a href="/artists/kpop/2NE1">2NE1</a></li>
<li><a href="/artists/kpop/4MINUTE">4MINUTE</a></li>
<li><a href="/artists/kpop/2PM">2PM</a></li>
</ul>

</li>
<li><a href="/artists/jpop">J-Pop</a></li>
<li><a href="/artists/alternative">Alternativo</a></li>
</ul>

</li>

Y ese es el metodo que se seguirá para todas las pestañas y subpestañas, es muy facil y normalmente se aplica a la mayoria de menus existentes.

Dificultad: Media
Fuente: Red-Team-Design.com

FUTUdownloads

Buscar este blog

Gadget:Menu desplegable animado con CSS3 y Jquery