Videos Tutoriales, Diseño web, Códigos HTML, Descargas, Música y mucho más - Menus horizontales con submenus para tu pagina web

Menus horizontales con submenus para tu pagina web

Menús horizontales con submenús

<style type="text/css"> 			 			* { 				margin:0px; 				padding:0px; 			} 			 			#header { 				margin:auto; 				width:950px; 				font-family:Arial, Helvetica, sans-serif; 			} 			 			ul, ol { 				list-style:none; 			} 			 			.nav > li { 				float:left; 			} 			 			.nav li a { 				background-color:#000; 				color:#fff; 				text-decoration:none; 				padding:10px 12px; 				display:block; 			} 			 			.nav li a:hover { 				background-color:#434343; 			} 			 			.nav li ul { 				display:none; 				position:absolute; 				min-width:140px; 			} 			 			.nav li:hover > ul { 				display:block; 			} 			 			.nav li ul li { 				position:relative; 			} 			 			.nav li ul li ul { 				right:-140px; 				top:0px; 			} 			 		</style> <div id="header"> <ul class="nav">     <li><a href="" _fcksavedurl="">Inicio</a></li>     <li><a href="" _fcksavedurl="">Servicios</a>     <ul>         <li><a href="" _fcksavedurl="">Submenu1</a></li>         <li><a href="" _fcksavedurl="">Submenu2</a></li>         <li><a href="" _fcksavedurl="">Submenu3</a></li>         <li><a href="" _fcksavedurl="">Submenu4</a></li>     </ul>     </li>     <li><a href="" _fcksavedurl="">Acerca de</a>     <ul>         <li><a href="" _fcksavedurl="">Submenu1</a></li>         <li><a href="" _fcksavedurl="">Submenu2</a></li>         <li><a href="" _fcksavedurl="">Submenu3</a></li>         <li><a href="" _fcksavedurl="">Submenu4</a></li>     </ul>     </li>     <li><a href="" _fcksavedurl="">Contacto</a></li> </ul> </div>

<style type="text/css">   /* 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: 40px;      width: 350px;     /* el color de fondo */     background: #555;     background: -moz-linear-gradient(#555,#222);     background: -webkit-linear-gradient(#555,#222);     background: -o-linear-gradient(#555,#222);     background: -ms-linear-gradient(#555,#222);     background: linear-gradient(#555,#222);   }    /* 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: 40px;     list-style: none;     margin: 0;     padding: 0;     position: relative;   }   .mi-menu li a {     border-left: 1px solid #000;     border-right: 1px solid #666;     color: #EEE;     display: block;     font-family: Tahoma;     font-size: 13px;     font-weight: bold;     line-height: 28px;     padding: 0 14px;     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;   }   /* 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: Crimson; }    /* los submenús */   .mi-menu ul {     border-radius: 0 0 5px 5px;     left: 0;     margin: 0;     opacity: 0; /* no son visibles */     position: absolute;     top: 40px; /* se ubican debajo del enlace principal */     /* el color de fondo */     background: #222;     background: -moz-linear-gradient(#222,#555);     background: -webkit-linear-gradient(#22,#555);     background: -o-linear-gradient(#222,#555);     background: -ms-linear-gradient(#222,#555);     background: linear-gradient(#222,#555);     /* 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: 36px; /* los mostramos */     overflow: visible;     padding: 0;   }   .mi-menu ul li a {     border: none;     border-bottom: 1px solid #111;     margin: 0;     /* el ancho dependerá de los textos a utilizar */     padding: 5px 30px;     width: 100px;   }   /* el último n otiene un borde */   .mi-menu ul li:last-child a { border: none; }  </style> <ul class="mi-menu">     <li><a href="#" _fcksavedurl="#">Inicio</a></li>     <li><a href="#" _fcksavedurl="#">Servicios</a>     <ul>         <li><a href="#" _fcksavedurl="#">Submenu1</a></li>         <li><a href="#" _fcksavedurl="#">Submenu2</a></li>         <li><a href="#" _fcksavedurl="#">Submenu3</a></li>         <li><a href="#" _fcksavedurl="#">Submenu4</a></li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#">Acerca de</a></li>     <li><a href="#" _fcksavedurl="#">Contacto</a></li> </ul>

<style type="text/css"> * { font-family:sans-serif; list-style:none; text-decoration:none; margin:0; padding:0; }   .nav > li { float:left; }   .nav li a { background:#0c9ba0; color:#FFF; display:block; border:1px solid; padding:10px 12px; }   .nav li a:hover { background:#0fbfc6; } .nav li ul { display:none; position:absolute; min-width:140px; } .nav li:hover > ul { display:block; } .nav li ul li { position:relative; }   .nav li ul li ul { right:-140px; top:0; } .nav li .flecha{ font-size: 9px; padding-left: 6px; display: none; } .nav li a:not(:last-child) .flecha { display: inline; } 		</style> <ul class="nav">     <li><a href="#" _fcksavedurl="#">Home<span class="flecha">▼</span></a></li>     <li><a href="#" _fcksavedurl="#">Servicios<span class="flecha">▼</span></a>     <ul>         <li><a href="#" _fcksavedurl="#">Diseno grafico<span class="flecha">▼</span></a></li>         <li><a href="#" _fcksavedurl="#">Diseno web<span class="flecha">▼</span></a>         <ul>             <li><a href="#" _fcksavedurl="#">Submenu 1<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 2<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 3<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 4<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 5<span class="flecha">▼</span></a></li>         </ul>         </li>         <li><a href="#" _fcksavedurl="#">Marketing<span class="flecha">▼</span></a>         <ul>             <li><a href="#" _fcksavedurl="#">Submenu 1<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 2<span class="flecha">▼</span></a></li>             <li><a href="#" _fcksavedurl="#">Submenu 3<span class="flecha">▼</span></a></li>         </ul>         </li>         <li><a href="#" _fcksavedurl="#">SEO<span class="flecha">▼</span></a></li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#">Acerca de<span class="flecha">▼</span></a>     <ul>         <li><a href="#" _fcksavedurl="#">Historia<span class="flecha">▼</span></a></li>         <li><a href="#" _fcksavedurl="#">Mision<span class="flecha">▼</span></a></li>         <li><a href="#" _fcksavedurl="#">Vision<span class="flecha">▼</span></a></li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#">Contacto<span class="flecha">▼</span></a></li> </ul>

<style type="text/css"> #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {   border: none;   line-height: 1;   margin: 0;   padding: 0; } #cssmenu {   height: 37px;   display: block;   border: 1px solid;   border-radius: 5px;   width: auto;   border-color: #080808;   margin: 0;   padding: 0; } #cssmenu > ul {   list-style: inside none;   margin: 0;   padding: 0; } #cssmenu > ul > li {   list-style: inside none;   float: left;   display: inline-block;   position: relative;   margin: 0;   padding: 0; } #cssmenu.align-center > ul {   text-align: center; } #cssmenu.align-center > ul > li {   float: none;   margin-left: -3px; } #cssmenu.align-center ul ul {   text-align: left; } #cssmenu.align-center > ul > li:first-child > a {   border-radius: 0; } #cssmenu > ul > li > a {   outline: none;   display: block;   position: relative;   text-align: center;   text-decoration: none;   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);   font-weight: 700;   font-size: 13px;   font-family: Arial, Helvetica, sans-serif;   border-right: 1px solid #080808;   color: #ffffff;   padding: 12px 20px; } #cssmenu > ul > li:first-child > a {   border-radius: 5px 0 0 5px; } #cssmenu > ul > li > a:after {   content: "";   position: absolute;   border-right: 1px solid;   top: -1px;   bottom: -1px;   right: -2px;   z-index: 99;   border-color: #3c3c3c; } #cssmenu ul li.has-sub:hover > a:after {   top: 0;   bottom: 0; } #cssmenu > ul > li.has-sub > a:before {   content: "";   position: absolute;   top: 18px;   right: 6px;   border: 5px solid transparent;   border-top: 5px solid #ffffff; } #cssmenu > ul > li.has-sub:hover > a:before {   top: 19px; } #cssmenu > ul > li.has-sub:hover > a {   padding-bottom: 14px;   z-index: 999;   border-color: #3f3f3f; } #cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div {   display: block; } #cssmenu > ul > li.has-sub > a:hover, #cssmenu > ul > li.has-sub:hover > a {   background: #3f3f3f;   border-color: #3f3f3f; } #cssmenu ul li > ul, #cssmenu ul li > div {   display: none;   width: auto;   position: absolute;   top: 38px;   background: #3f3f3f;   border-radius: 0 0 5px 5px;   z-index: 999;   padding: 10px 0; } #cssmenu ul li > ul {   width: 200px; } #cssmenu ul ul ul {   position: absolute; } #cssmenu ul ul li:hover > ul {   left: 100%;   top: -10px;   border-radius: 5px; } #cssmenu ul li > ul li {   display: block;   list-style: inside none;   position: relative;   margin: 0;   padding: 0; } #cssmenu ul li > ul li a {   outline: none;   display: block;   position: relative;   font: 10pt Arial, Helvetica, sans-serif;   color: #ffffff;   text-decoration: none;   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);   margin: 0;   padding: 8px 20px; } #cssmenu, #cssmenu ul ul > li:hover > a, #cssmenu ul ul li a:hover {   background: #3c3c3c;   background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));   background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);   background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);   background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);   background: linear-gradient(top, #3c3c3c 0%, #222222 100%); } #cssmenu > ul > li > a:hover {   background: #080808;   color: #ffffff; } #cssmenu ul ul a:hover {   color: #ffffff; } #cssmenu > ul > li.has-sub > a:hover:before {   border-top: 5px solid #ffffff; }  </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Products</span></a>     <ul>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 1</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 2</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

<style type="text/css"> #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a {   margin: 0;   padding: 0;   position: relative; } #cssmenu {   line-height: 1;   border-radius: 5px 5px 0 0;   -moz-border-radius: 5px 5px 0 0;   -webkit-border-radius: 5px 5px 0 0;   background: #141414;   background: -moz-linear-gradient(top, #333333 0%, #141414 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));   background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);   background: -o-linear-gradient(top, #333333 0%, #141414 100%);   background: -ms-linear-gradient(top, #333333 0%, #141414 100%);   background: linear-gradient(to bottom, #333333 0%, #141414 100%);   border-bottom: 2px solid #0fa1e0;   width: auto; } #cssmenu:after, #cssmenu ul:after {   content: '';   display: block;   clear: both; } #cssmenu a {   background: #141414;   background: -moz-linear-gradient(top, #333333 0%, #141414 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));   background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);   background: -o-linear-gradient(top, #333333 0%, #141414 100%);   background: -ms-linear-gradient(top, #333333 0%, #141414 100%);   background: linear-gradient(to bottom, #333333 0%, #141414 100%);   color: #ffffff;   display: block;   font-family: Helvetica, Arial, Verdana, sans-serif;   padding: 19px 20px;   text-decoration: none; } #cssmenu ul {   list-style: none; } #cssmenu > ul > li {   display: inline-block;   float: left;   margin: 0; } #cssmenu.align-center {   text-align: center; } #cssmenu.align-center > ul > li {   float: none; } #cssmenu.align-center ul ul {   text-align: left; } #cssmenu.align-right > ul {   float: right; } #cssmenu.align-right ul ul {   text-align: right; } #cssmenu > ul > li > a {   color: #ffffff;   font-size: 12px; } #cssmenu > ul > li:hover:after {   content: '';   display: block;   width: 0;   height: 0;   position: absolute;   left: 50%;   bottom: 0;   border-left: 10px solid transparent;   border-right: 10px solid transparent;   border-bottom: 10px solid #0fa1e0;   margin-left: -10px; } #cssmenu > ul > li:first-child > a {   border-radius: 5px 0 0 0;   -moz-border-radius: 5px 0 0 0;   -webkit-border-radius: 5px 0 0 0; } #cssmenu.align-right > ul > li:first-child > a, #cssmenu.align-center > ul > li:first-child > a {   border-radius: 0;   -moz-border-radius: 0;   -webkit-border-radius: 0; } #cssmenu.align-right > ul > li:last-child > a {   border-radius: 0 5px 0 0;   -moz-border-radius: 0 5px 0 0;   -webkit-border-radius: 0 5px 0 0; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a {   color: #ffffff;   box-shadow: inset 0 0 3px #000000;   -moz-box-shadow: inset 0 0 3px #000000;   -webkit-box-shadow: inset 0 0 3px #000000;   background: #070707;   background: -moz-linear-gradient(top, #262626 0%, #070707 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));   background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);   background: -o-linear-gradient(top, #262626 0%, #070707 100%);   background: -ms-linear-gradient(top, #262626 0%, #070707 100%);   background: linear-gradient(to bottom, #262626 0%, #070707 100%); } #cssmenu .has-sub {   z-index: 1; } #cssmenu .has-sub:hover > ul {   display: block; } #cssmenu .has-sub ul {   display: none;   position: absolute;   width: 200px;   top: 100%;   left: 0; } #cssmenu.align-right .has-sub ul {   left: auto;   right: 0; } #cssmenu .has-sub ul li {   *margin-bottom: -1px; } #cssmenu .has-sub ul li a {   background: #0fa1e0;   border-bottom: 1px dotted #31b7f1;   font-size: 11px;   filter: none;   display: block;   line-height: 120%;   padding: 10px;   color: #ffffff; } #cssmenu .has-sub ul li:hover a {   background: #0c7fb0; } #cssmenu ul ul li:hover > a {   color: #ffffff; } #cssmenu .has-sub .has-sub:hover > ul {   display: block; } #cssmenu .has-sub .has-sub ul {   display: none;   position: absolute;   left: 100%;   top: 0; } #cssmenu.align-right .has-sub .has-sub ul, #cssmenu.align-right ul ul ul {   left: auto;   right: 100%; } #cssmenu .has-sub .has-sub ul li a {   background: #0c7fb0;   border-bottom: 1px dotted #31b7f1; } #cssmenu .has-sub .has-sub ul li a:hover {   background: #0a6d98; } #cssmenu ul ul li.last > a, #cssmenu ul ul li:last-child > a, #cssmenu ul ul ul li.last > a, #cssmenu ul ul ul li:last-child > a, #cssmenu .has-sub ul li:last-child > a, #cssmenu .has-sub ul li.last > a {   border-bottom: 0; }  </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Products</span></a>     <ul>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 1</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 2</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); /* Starter CSS for Menu */ #cssmenu {   padding: 0;   margin: 0;   border: 0;   width: auto; } #cssmenu ul, #cssmenu li {   list-style: none;   margin: 0;   padding: 0; } #cssmenu ul {   position: relative;   z-index: 597; } #cssmenu ul li {   float: left;   min-height: 1px;   vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover {   position: relative;   z-index: 599;   cursor: default; } #cssmenu ul ul {   visibility: hidden;   position: absolute;   top: 100%;   left: 0;   z-index: 598;   width: 100%; } #cssmenu ul ul li {   float: none; } #cssmenu ul ul ul {   top: 0;   left: 190px;   width: 190px; } #cssmenu ul li:hover > ul {   visibility: visible; } #cssmenu ul ul {   bottom: 0;   left: 0; } #cssmenu ul ul {   margin-top: 0; } #cssmenu ul ul li {   font-weight: normal; } #cssmenu a {   display: block;   line-height: 1em;   text-decoration: none; } /* Custom CSS Styles */ #cssmenu {   background: #333333;   border-bottom: 4px solid #1b9bff;   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;   font-size: 12px; } #cssmenu > ul {   *display: inline-block; } #cssmenu:after, #cssmenu ul:after {   content: '';   display: block;   clear: both; } #cssmenu ul {   text-transform: uppercase; } #cssmenu ul ul {   border-top: 4px solid #1b9bff;   text-transform: none;   min-width: 190px; } #cssmenu ul ul a {   background: #1b9bff;   color: #ffffff;   border: 1px solid #0082e7;   border-top: 0 none;   line-height: 150%;   padding: 16px 20px;   font-size: 12px; } #cssmenu ul ul ul {   border-top: 0 none; } #cssmenu ul ul li {   position: relative; } #cssmenu ul ul li:first-child > a {   border-top: 1px solid #0082e7; } #cssmenu ul ul li:hover > a {   background: #4eb1ff;   color: #ffffff; } #cssmenu ul 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;   -moz-background-clip: padding;   -webkit-background-clip: padding-box;   background-clip: padding-box;   -moz-box-shadow: 0 1px 0 #1b9bff;   -webkit-box-shadow: 0 1px 0 #1b9bff;   box-shadow: 0 1px 0 #1b9bff; } #cssmenu ul ul li:last-child:hover > a {   -moz-border-radius: 0 0 0 3px;   -webkit-border-radius: 0 0 0 3px;   border-radius: 0 0 0 3px;   -moz-background-clip: padding;   -webkit-background-clip: padding-box;   background-clip: padding-box; } #cssmenu ul ul li.has-sub > a:after {   content: '+';   position: absolute;   top: 50%;   right: 15px;   margin-top: -8px; } #cssmenu ul li:hover > a, #cssmenu ul li.active > a {   background: #1b9bff;   color: #ffffff; } #cssmenu ul li.has-sub > a:after {   content: '+';   margin-left: 5px; } #cssmenu ul li.last ul {   left: auto;   right: 0; } #cssmenu ul li.last ul ul {   left: auto;   right: 99.5%; } #cssmenu a {   background: #333333;   color: #CBCBCB;   padding: 0 20px; } #cssmenu > ul > li > a {   line-height: 48px;   font-size: 12px; }  </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Products</span></a>     <ul>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 1</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 2</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

<style type="text/css">@charset "UTF-8"; /* Base Styles */ #cssmenu > ul, #cssmenu > ul li, #cssmenu > ul ul {   list-style: none;   margin: 0;   padding: 0; } #cssmenu > ul {   position: relative;   z-index: 597; } #cssmenu > ul li {   float: left;   min-height: 1px;   line-height: 1.3em;   vertical-align: middle; } #cssmenu > ul li.hover, #cssmenu > ul li:hover {   position: relative;   z-index: 599;   cursor: default; } #cssmenu > ul ul {   visibility: hidden;   position: absolute;   top: 100%;   left: 0;   z-index: 598;   width: 100%; } #cssmenu > ul ul li {   float: none; } #cssmenu > ul ul ul {   top: 1px;   left: 99%; } #cssmenu > ul li:hover > ul {   visibility: visible; } /* Align last drop down RTL */ #cssmenu > ul > li.last ul ul {   left: auto !important;   right: 99%; } #cssmenu > ul > li.last ul {   left: auto;   right: 0; } #cssmenu > ul > li.last {   text-align: right; } /* Theme Styles */ #cssmenu > ul {   border-top: 4px solid #3fa338;   font-family: Calibri, Tahoma, Arial, sans-serif;   font-size: 14px;   background: #1e1e1e;   background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));   background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);   background: linear-gradient(top, #1e1e1e 0%, #040404 100%);   width: auto;   zoom: 1; } #cssmenu > ul:before {   content: '';   display: block; } #cssmenu > ul:after {   content: '';   display: table;   clear: both; } #cssmenu > ul li a {   display: inline-block;   padding: 10px 22px; } #cssmenu > ul > li.active, #cssmenu > ul > li.active:hover {   background-color: #3fa338; } #cssmenu > ul > li > a:link, #cssmenu > ul > li > a:active, #cssmenu > ul > li > a:visited {   color: #ffffff; } #cssmenu > ul > li > a:hover {   color: #ffffff; } #cssmenu > ul ul ul {   top: 0; } #cssmenu > ul li li {   background-color: #ffffff;   border-bottom: 1px solid #ebebeb;   font-size: 12px; } #cssmenu > ul li.hover, #cssmenu > ul li:hover {   background-color: #F5F5F5; } #cssmenu > ul > li.hover, #cssmenu > ul > li:hover {   background-color: #3fa338;   -webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);   -moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);   box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15); } #cssmenu > ul a:link, #cssmenu > ul a:visited {   color: #9a9a9a;   text-decoration: none; } #cssmenu > ul a:hover {   color: #9a9a9a; } #cssmenu > ul a:active {   color: #9a9a9a; } #cssmenu > ul ul {   border: 1px solid #CCC \9;   -webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);   -moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);   box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);   width: 150px; } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Products</span></a>     <ul>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 1</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 2</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

<style type="text/css"> @charset "UTF-8"; #cssmenu {   padding: 0;   margin: 0;   border: 0;   width: auto; } #cssmenu ul, #cssmenu ul li, #cssmenu ul ul {   list-style: none;   margin: 0;   padding: 0; } #cssmenu ul {   position: relative;   z-index: 597;   float: left; } #cssmenu ul li {   float: left;   min-height: 1px;   line-height: 1em;   vertical-align: middle; } #cssmenu ul li.hover, #cssmenu ul li:hover {   position: relative;   z-index: 599;   cursor: default; } #cssmenu ul ul {   visibility: hidden;   position: absolute;   top: 100%;   left: 0;   z-index: 598;   width: 100%; } #cssmenu ul ul li {   float: none; } #cssmenu ul ul ul {   top: 1px;   left: 99%; } #cssmenu ul li:hover > ul {   visibility: visible; } #cssmenu ul ul {   top: 1px;   left: 99%; } #cssmenu ul li {   float: none; } #cssmenu ul ul {   margin-top: 1px; } #cssmenu ul ul li {   font-weight: normal; } /* Custom CSS Styles */ #cssmenu:after, #cssmenu ul:after {   content: '';   display: block;   clear: both; } #cssmenu > ul > li > a {   color: #333333; } #cssmenu ul ul a {   color: #333333; } #cssmenu a {   display: inline-block;   font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;   font-size: 12px;   padding: 0 20px;   text-align: center;   text-decoration: none; } #cssmenu a:hover {   background: #f6f6f6;   border-radius: 4px 4px 0 0;   -moz-border-radius: 4px 4px 0 0;   -webkit-border-radius: 4px 4px 0 0;   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   position: relative;   top: 0; } #cssmenu ul {   background: #e5e5e5;   border-radius: 5px 5px 0 0;   -moz-border-radius: 5px 5px 0 0;   -webkit-border-radius: 5px 5px 0 0;   list-style: none; } #cssmenu > ul {   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;   background: -moz-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(100%, #dddddd));   background: -webkit-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);   background: -o-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);   background: -ms-linear-gradient(top, #e5e5e5 0%, #dddddd 100%);   background: linear-gradient(#e5e5e5 0%, #dddddd 100%);   box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);   -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);   -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);   padding-top: 5px;   width: 100%; } #cssmenu > ul > li {   float: left;   padding: 0 10px;   position: relative; } #cssmenu > ul > li:hover > a {   background: #f6f6f6;   border-radius: 4px 4px 0 0;   -moz-border-radius: 4px 4px 0 0;   -webkit-border-radius: 4px 4px 0 0;   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);   position: relative; } #cssmenu > ul > li a {   line-height: 35px; } #cssmenu > ul > li a:hover {   box-shadow: none;   -moz-box-shadow: none;   -webkit-box-shadow: none; } #cssmenu .has-sub:hover ul {   display: block; } #cssmenu .has-sub a {   display: block;   position: relative; } #cssmenu .has-sub > a:after {   content: '';   display: block;   width: 10px;   height: 9px;   position: absolute;   right: 5px;   top: 50%;   margin-top: -5px;   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);   -webkit-transform: rotate(360deg); } #cssmenu .has-sub ul {   background: #f6f6f6;   border: 1px solid #dddddd;   border-radius: 5px;   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   display: none;   padding: 10px 0;   position: absolute;   left: 50%;   top: 34px;   margin-left: -70px;   width: 140px;   z-index: 1; } #cssmenu .has-sub ul li:hover > a {   background: #dddddd;   color: #ae0001;   border-color: #e5e5e5 transparent transparent transparent; } #cssmenu .has-sub ul a {   line-height: 160%;   padding: 8px 0; } #cssmenu .has-sub .has-sub a:after {   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);   -webkit-transform: rotate(360deg); } #cssmenu .has-sub .has-sub ul {   background: #dddddd;   left: 100%;   top: 0;   margin-left: 0; } #cssmenu .has-sub .has-sub ul a {   background: none;   box-shadow: none;   -moz-box-shadow: none;   -webkit-box-shadow: none;   border-radius: 0;   -moz-border-radius: 0;   -webkit-border-radius: 0; } #cssmenu .has-sub .has-sub ul a:after {   background-image: none; } #cssmenu .has-sub .has-sub ul a:hover {   background: #bfbfbf; }  </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Products</span></a>     <ul>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 1</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>         <li class="has-sub"><a href="#" _fcksavedurl="#"><span>Product 2</span></a>         <ul>             <li><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>             <li class="last"><a href="#" _fcksavedurl="#"><span>Sub Item</span></a></li>         </ul>         </li>     </ul>     </li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

¡Hoy había/n 11 visitantes (16 clics a subpáginas) en ésta página!

Suscríbete Facebook Twitter

Tweets por el @JesusArmandoT.
RADIO EN LINEA
PLANTILLAS
- Plantillas CSS
- Plantillas IceBlue
DESCARGAS GRATIS
PARA TU PÁGINA WEB
GENERADORES
OTRAS COSAS

Redes Sociales

En edición...

Suscríbete a mi canal

Este sitio web fue creado gratuitamente con PaginaWebGratis.es. ¿Quieres tener tu propio sitio web?

Regístrate gratis