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

Menus horizontales sin submenus para tu pagina web

Menús horizontales sin submenús

<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></li>     <li><a href="#" _fcksavedurl="#">Acerca de</a></li>     <li><a href="#" _fcksavedurl="#">Contacto</a></li> </ul>

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Raleway); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu {   width: auto;   border-bottom: 3px solid #47c9af;   font-family: Raleway, sans-serif;   line-height: 1; } #cssmenu ul {   background: #ffffff; } #cssmenu > ul > li {   float: left; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu.align-right > ul > li > a {   margin-right: 0;   margin-left: -4px; } #cssmenu > ul > li > a {   z-index: 2;   padding: 18px 25px 12px 25px;   font-size: 15px;   font-weight: 400;   text-decoration: none;   color: #444444;   -webkit-transition: all .2s ease;   -moz-transition: all .2s ease;   -ms-transition: all .2s ease;   -o-transition: all .2s ease;   transition: all .2s ease;   margin-right: -4px; } #cssmenu > ul > li.active > a, #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover {   color: #ffffff; } #cssmenu > ul > li > a:after {   position: absolute;   left: 0;   bottom: 0;   right: 0;   z-index: -1;   width: 100%;   height: 120%;   border-top-left-radius: 8px;   border-top-right-radius: 8px;   content: "";   -webkit-transition: all .2s ease;   -o-transition: all .2s ease;   transition: all .2s ease;   -webkit-transform: perspective(5px) rotateX(2deg);   -webkit-transform-origin: bottom;   -moz-transform: perspective(5px) rotateX(2deg);   -moz-transform-origin: bottom;   transform: perspective(5px) rotateX(2deg);   transform-origin: bottom; } #cssmenu > ul > li.active > a:after, #cssmenu > ul > li:hover > a:after, #cssmenu > ul > li > a:hover:after {   background: #47c9af; }  		</style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html">Home</a></li>     <li><a href="#" _fcksavedurl="#">Products</a></li>     <li><a href="#" _fcksavedurl="#">About</a></li>     <li><a href="#" _fcksavedurl="#">Contact</a></li> </ul> </div>

<style type="text/css">#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu {   width: auto;   font-family: Helvetica, Arial, sans-serif;   color: #ffffff; } #cssmenu.align-right ul li {   float: right;   border-right: 0;   border-left: 1px solid rgba(0, 0, 0, 0.22); } #cssmenu.align-right ul li a {   border-right: 0;   border-left: 1px solid rgba(255, 255, 255, 0.15); } #cssmenu ul {   background: #222222;   /* Old browsers */    background: -moz-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);   background: -webkit-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);   background: -o-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);   background: -ms-linear-gradient(bottom, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%);   background: linear-gradient(to top, #000000 0%, #222222 50%, #3c3c3c 51%, #393939 78%, #888888 100%); } #cssmenu:after, #cssmenu ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu ul li {   float: left;   display: block;   border-right: 1px solid rgba(0, 0, 0, 0.22);   z-index: 1; } #cssmenu ul li::after {   content: "";   width: 100%;   height: 8px;   position: absolute;   border-top-left-radius: 50% 4px;   border-top-right-radius: 50% 4px;   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #222222 61%, #222222 100%);   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));   z-index: 2;   bottom: 10px; } #cssmenu ul li a {   display: block;   padding: 10px 30px;   text-decoration: none;   font-size: 12px;   text-transform: uppercase;   color: #ffffff;   border-right: 1px solid rgba(255, 255, 255, 0.15);   z-index: 3; } #cssmenu ul li a:hover, #cssmenu ul li.active a {   color: #ffffff; } #cssmenu ul li:hover, #cssmenu ul li.active {   background: #1275ae;   /* Old browsers */    background: -moz-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);   background: -webkit-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);   background: -o-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);   background: -ms-linear-gradient(bottom, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%);   background: linear-gradient(to top, #0b4669 0%, #1275ae 50%, #1794dc 51%, #1691d8 78%, #98d2f4 100%); } #cssmenu ul li:hover::after, #cssmenu ul li.active::after {   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #1275ae 61%, #1275ae 100%);   background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html">Inicio</a></li>     <li><a href="#" _fcksavedurl="#">Servicios</a></li>     <li><a href="#" _fcksavedurl="#">Acerca de</a></li>     <li><a href="#" _fcksavedurl="#">Contacto</a></li> </ul> </div>

<style type="text/css">#cssmenu ul {   margin: 0;   padding: 0;   list-style-type: none;   width: auto;   position: relative;   display: block;   font-size: 12px;   font-weight: bold;   background: #353535;   font-family: Arial, Helvetica, sans-serif;   border-bottom: 1px solid #353535;   zoom: 1; } #cssmenu ul:before {   content: '';   display: block; } #cssmenu ul:after {   content: '';   display: table;   clear: both; } #cssmenu li {   display: block;   float: left;   margin: 0;   padding: 0 4px; } #cssmenu li a {   display: block;   float: left;   color: #999999;   text-decoration: none;   font-weight: bold;   padding: 10px 20px 7px 20px;   border-bottom: 3px solid transparent; } #cssmenu li a:hover {   color: #FFFFFF;   border-bottom: 3px solid #00b8fd; } #cssmenu li.active a {   display: inline;   border-bottom: 3px solid #00b8fd;   float: left;   margin: 0; } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Inicio</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Servicios</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Acerca de</span></a></li>     <li class="last"><a href="#" _fcksavedurl="#"><span>Contacto</span></a></li> </ul>

<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Oswald); #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {   margin: 0;   padding: 0;   border: 0;   list-style: none;   line-height: 1;   display: block;   position: relative;   -webkit-box-sizing: border-box;   -moz-box-sizing: border-box;   box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu #menu-button {   display: none; } #cssmenu {   width: auto;   border: 3px solid #fd8a17;   border-radius: 3px;   font-family: 'Oswald', sans-serif;   line-height: 1;   background: #f7f7f7;   box-shadow: 1px 1px 0 #df7002, 2px 2px 0 #df7002, 3px 3px 3px rgba(0, 0, 0, 0.35); } #cssmenu > ul {   background: url('images/bg.png'); } #cssmenu > ul > li {   float: left; } #cssmenu.align-center > ul {   font-size: 0;   text-align: center; } #cssmenu.align-center > ul > li {   display: inline-block;   float: none; } #cssmenu.align-right > ul > li {   float: right; } #cssmenu > ul > li > a {   padding: 20px 25px;   font-size: 14px;   text-transform: uppercase;   text-decoration: none;   color: #fd8a17;   -webkit-transition: all .2s ease;   -moz-transition: all .2s ease;   -ms-transition: all .2s ease;   -o-transition: all .2s ease;   transition: all .2s ease; } #cssmenu > ul > li > a:hover, #cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a {   color: #444444; } #cssmenu #menu-indicator {   position: absolute;   bottom: 0;   display: block;   height: 0;   width: 0;   border: 5px solid transparent;   border-bottom-color: #fd8a17;   -webkit-transition: all 0.25s ease-out;   -moz-transition: all 0.25s ease-out;   -ms-transition: all 0.25s ease-out;   -o-transition: all 0.25s ease-out;   transition: all 0.25s ease-out; } #cssmenu.small-screen {   width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul {   width: 100%;   text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center > ul > li {   float: none;   display: block;   border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li > a {   padding: 18px 25px; } #cssmenu.small-screen > ul > li:after, #cssmenu.small-screen > ul > li:before {   display: none; } #cssmenu.small-screen #menu-button {   display: block;   padding: 18px 25px;   cursor: pointer;   font-size: 14px;   text-transform: uppercase;   text-decoration: none;   color: #fd8a17;   background: url('images/bg.png'); } #cssmenu.small-screen #menu-button.menu-opened {   color: #444444; } #cssmenu.small-screen #menu-button:after {   content: "";   position: absolute;   right: 25px;   top: 19.5px;   display: block;   -webkit-box-sizing: content-box;   -moz-box-sizing: content-box;   box-sizing: content-box;   border-top: 2px solid #fd8a17;   border-bottom: 2px solid #fd8a17;   width: 18px;   height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after {   border-top: 2px solid #444444;   border-bottom: 2px solid #444444; } #cssmenu.small-screen #menu-button:before {   content: "";   position: absolute;   right: 25px;   top: 29.5px;   display: block;   width: 18px;   height: 2px;   background: #fd8a17; } #cssmenu.small-screen #menu-button.menu-opened:before {   background: #444444; } #cssmenu.small-screen #menu-indicator {   display: none; } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html">Home</a></li>     <li><a href="#" _fcksavedurl="#">Products</a></li>     <li><a href="#" _fcksavedurl="#">About</a></li>     <li><a href="#" _fcksavedurl="#">Contact</a></li> </ul> </div>

<style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); @charset "UTF-8"; /* Base Styles */ #cssmenu ul, #cssmenu li, #cssmenu a {   list-style: none;   margin: 0;   padding: 0;   border: 0;   line-height: 1;   font-family: 'Lato', sans-serif; } #cssmenu {   border: 1px solid #133e40;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   width: auto; } #cssmenu ul {   zoom: 1;   background: #36b0b6;   background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));   background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);   background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);   background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);   background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);   padding: 5px 10px;   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px; } #cssmenu ul:before {   content: '';   display: block; } #cssmenu ul:after {   content: '';   display: table;   clear: both; } #cssmenu li {   float: left;   margin: 0 5px 0 0;   border: 1px solid transparent; } #cssmenu li a {   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   padding: 8px 15px 9px 15px;   display: block;   text-decoration: none;   color: #ffffff;   border: 1px solid transparent;   font-size: 16px; } #cssmenu li.active {   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   border: 1px solid #36b0b6; } #cssmenu li.active a {   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   display: block;   background: #1e6468;   border: 1px solid #133e40;   -moz-box-shadow: inset 0 5px 10px #133e40;   -webkit-box-shadow: inset 0 5px 10px #133e40;   box-shadow: inset 0 5px 10px #133e40; } #cssmenu li:hover {   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   border: 1px solid #36b0b6; } #cssmenu li:hover a {   -webkit-border-radius: 5px;   -moz-border-radius: 5px;   -ms-border-radius: 5px;   -o-border-radius: 5px;   border-radius: 5px;   display: block;   background: #1e6468;   border: 1px solid #133e40;   -moz-box-shadow: inset 0 5px 10px #133e40;   -webkit-box-shadow: inset 0 5px 10px #133e40;   box-shadow: inset 0 5px 10px #133e40; } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Products</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>About</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Contact</span></a></li> </ul> </div>

<style type="text/css"> #cssmenu {   zoom: 1;   width: auto;   background: #000000;   padding: 8px 0; } #cssmenu:before {   content: '';   display: block; } #cssmenu:after {   content: '';   display: table;   clear: both; } #cssmenu ul {   list-style-type: none;   position: relative;   display: block;   font-size: 12px;   font-family: Verdana, Helvetica, Arial, sans-serif;   margin: 0;   padding: 0;   border-bottom: 1px solid #7ab900;   zoom: 1; } #cssmenu ul:before {   content: '';   display: block; } #cssmenu ul:after {   content: '';   display: table;   clear: both; } #cssmenu li {   display: block;   float: left;   margin: 0;   padding: 0; } #cssmenu li a {   float: left;   color: #A79787;   text-decoration: none;   height: 24px;   padding: 9px 15px 0;   font-weight: normal; } #cssmenu li:hover, #cssmenu .active {   text-decoration: none;   border-bottom: 2px solid #7ab900; } #cssmenu li:hover a {   color: #fff; } #cssmenu .active a {   color: #fff;   font-weight: 700; } </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Products</span></a></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 {   margin: 0;   padding: 0;   list-style-type: none;   position: relative;   display: block;   height: 36px;   text-transform: uppercase;   font-size: 12px;   font-weight: bold;   background: transparent url("https://img.webme.com/pic/s/spongebob7cweb/OFF.gif") repeat-x top left;   font-family: Helvetica, Arial, Verdana, sans-serif;   border-bottom: 4px solid #004c99;   border-top: 1px solid #74b0c6;   width: auto; } #cssmenu li {   display: block;   float: left;   margin: 0;   padding: 0; } #cssmenu li a {   display: block;   float: left;   color: #6d7078;   text-decoration: none;   font-weight: bold;   padding: 12px 20px 0 20px;   height: 24px;   background: transparent url("https://img.webme.com/pic/s/spongebob7cweb/DIVIDER.gif") no-repeat top right; } #cssmenu li a:hover {   background: transparent url("https://img.webme.com/pic/s/spongebob7cweb/HOVER.gif") no-repeat top right;   color: #6d7078; }  </style> <div id="cssmenu"> <ul>     <li class="active"><a href="index.html" _fcksavedurl="index.html"><span>Home</span></a></li>     <li><a href="#" _fcksavedurl="#"><span>Products</span></a></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 2 visitantes (6 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 de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?

Registrarse gratis