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

Menus verticales sin submenus para tu pagina web

Menús verticales sin submenús

<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: 180px;   z-index: 10; } #cssmenu ul {   border: 1px solid #cccccc;   border-radius: 5px;   background: #ffffff;   background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff);   background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff);   background: -o-linear-gradient(bottom, #f0f0f0, #ffffff);   background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff);   background: linear-gradient(to top, #f0f0f0, #ffffff); } #cssmenu ul li {   display: block;   border-bottom: 1px solid #cccccc; } #cssmenu ul li.active {   border-bottom: 0; } #cssmenu ul li:last-child {   border-bottom: 0; } #cssmenu ul li a {   display: block;   padding: 14px 12px;   font-family: Helvetica, Arial, sans-serif;   font-size: 16px;   font-weight: bold;   text-decoration: none;   color: #444444; } #cssmenu ul li.active {   left: -8px;   width: 194px;   padding: 2px;   background: #ce4c4a;   background: -moz-linear-gradient(bottom, #c43735, #d56462);   background: -webkit-linear-gradient(bottom, #c43735, #d56462);   background: -o-linear-gradient(bottom, #c43735, #d56462);   background: -ms-linear-gradient(bottom, #c43735, #d56462);   background: linear-gradient(to top, #c43735, #d56462);   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } #cssmenu ul li.active > a {   padding: 12px 12px 12px 16px;   border-left: 1px dashed #de8886;   border-top: 1px dashed #de8886;   border-bottom: 1px dashed #de8886;   color: #ffffff;   text-shadow: 0 1px 1px #8c2726; } #cssmenu ul li.active:after {   position: absolute;   right: -16px;   top: 7px;   width: 31.526911934581186px;   height: 31.526911934581186px;   background: #ce4c4a;   background: -moz-linear-gradient(-45deg, #c43735, #d56462);   background: -webkit-linear-gradient(-45deg, #c43735, #d56462);   background: -o-linear-gradient(-45deg, #c43735, #d56462);   background: -ms-linear-gradient(-45deg, #c43735, #d56462);   background: linear-gradient(-45deg, #c43735, #d56462);   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg);   transform: rotate(45deg);   content: ""; } #cssmenu ul li.active:before {   position: absolute;   right: -12px;   top: 9px;   z-index: 10;   width: 28.526911934581186px;   height: 28.526911934581186px;   border-right: 1px dashed #e9afae;   border-top: 1px dashed #e9afae;   -webkit-transform: rotate(45deg);   -moz-transform: rotate(45deg);   -ms-transform: rotate(45deg);   -o-transform: rotate(45deg);   transform: rotate(45deg);   content: ""; } #cssmenu ul li.active a:after {   position: absolute;   bottom: -7px;   left: -11px;   z-index: -1;   width: 0;   height: 0;   border-top: 4px solid transparent;   border-bottom: 4px solid transparent;   border-left: 8px solid transparent;   border-right: 8px solid #982b29;   content: ""; }  </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 {   background: #333;   list-style: none;   margin: 0;   padding: 0;   width: 12em; } #cssmenu li {   font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;   margin: 0;   padding: 0;   list-style: none; } #cssmenu a {   background: #333;   border-bottom: 1px solid #393939;   color: #ccc;   display: block;   margin: 0;   padding: 8px 12px;   text-decoration: none;   font-weight: normal; } #cssmenu a:hover {   background: #2580a2 url("https://img.webme.com/pic/s/spongebob7cweb/hover.gif") left center no-repeat;   color: #fff;   padding-bottom: 8px; } </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 {   width: 200px;   border-style: solid solid none solid;   border-color: #94AA74;   border-size: 1px;   border-width: 1px; } #cssmenu ul {   list-style: none;   padding: 0px;   margin: 0px; } #cssmenu li a {   height: 32px;   height: 24px;   text-decoration: none;   font-weight: normal; } #cssmenu li a:link, #cssmenu li a:visited {   color: #5E7830;   display: block;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu1.gif);   background-repeat: no-repeat;   padding: 8px 0 0 10px; } #cssmenu li a:hover {   color: #26370A;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu1.gif) 0 -32px;   background-repeat: no-repeat;   padding: 8px 0 0 10px; } #cssmenu li a:active {   color: #26370A;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu1.gif) 0 -64px;   background-repeat: no-repeat;   padding: 8px 0 0 10px; }  </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 {   width: 200px;   border-style: solid solid none solid;   border-color: #D76100;   border-size: 1px;   border-width: 1px;   padding: 0px; } #cssmenu ul {   margin: 0px;   padding: 0px;   list-style: none; } #cssmenu li a {   height: 32px;   height: 24px;   text-decoration: none;   font-weight: normal;   color: #9E3C02;   display: block;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu4.gif);   padding: 8px 0 0 30px; } #cssmenu li a:hover {   color: #fff;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu4.gif) 0 -32px;   padding: 8px 0 0 30px; } #cssmenu li a:active {   color: #fff;   background: url(https://img.webme.com/pic/s/spongebob7cweb/menu4.gif) 0 -64px;   padding: 8px 0 0 30px; }  </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 {   width: 200px;   border-style: solid solid none solid;   border-color: #94AA74;   border-width: 1px; } #cssmenu ul {   list-style: none;   margin: 0px;   padding: 0px; } #cssmenu li a {   height: 32px;   height: 24px;   text-decoration: none;   font-weight: normal;   display: block; } #cssmenu li a:link, #cssmenu li a:visited {   color: #FFFFFF;   display: block;   background: url(https://img.webme.com/pic/s/spongebob7cweb/v6.gif);   background-repeat: no-repeat;   padding: 8px 0 0 50px; } #cssmenu li a:hover {   color: #666666;   background: url(https://img.webme.com/pic/s/spongebob7cweb/v6.gif) 0 -32px;   background-repeat: no-repeat;   padding: 8px 0 0 50px; } #cssmenu li a:active {   color: #666666;   background: url(https://img.webme.com/pic/s/spongebob7cweb/v6.gif) 0 -64px;   background-repeat: no-repeat;   padding: 8px 0 0 50px; } </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, #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: 200px;   font-family: Helvetica, Arial, sans-serif;   color: #ffffff; } #cssmenu.align-right {   float: right; } #cssmenu:after, #cssmenu ul:after {   content: ".";   display: block;   clear: both;   visibility: hidden;   line-height: 0;   height: 0; } #cssmenu ul li {   display: block;   z-index: 1;   background: #222222;   /* Old browsers */    background: -moz-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);   background: -webkit-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);   background: -o-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);   background: -ms-linear-gradient(bottom, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%);   background: linear-gradient(to top, #080808 0%, #222222 50%, #363636 51%, #343434 78%, #6f6f6f 100%); } #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;   z-index: 3; } #cssmenu ul li a:hover, #cssmenu ul li.active a {   color: #ffffff; } #cssmenu ul li:hover, #cssmenu ul li.active {   background: #16bd8c;   background: -moz-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);   background: -webkit-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);   background: -o-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);   background: -ms-linear-gradient(bottom, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 100%);   background: linear-gradient(to top, #118f6a 0%, #16bd8c 50%, #1ae2a7 51%, #1adda4 78%, #7cf0ce 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%, #16bd8c 61%, #16bd8c 100%);   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);   background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 100%);   background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #16bd8c 61%, #16bd8c 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"><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"> @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); /* Starter CSS for Flyout Menu */ #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul ul {   list-style: none;   margin: 0;   padding: 0;   border: 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 {   margin-top: 1px;   visibility: hidden;   position: absolute;   top: 1px;   left: 99%;   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 li {   float: none; } #cssmenu ul ul li {   font-weight: normal; } /* Custom CSS Styles */ #cssmenu {   font-family: 'Lato', sans-serif;   font-size: 18px;   width: 200px; } #cssmenu ul a, #cssmenu ul a:link, #cssmenu ul a:visited {   display: block;   color: #848889;   text-decoration: none;   font-weight: 300; } #cssmenu > ul {   float: none; } #cssmenu ul {   background: #FAFAFA; } #cssmenu > ul > li {   border-left: 3px solid #d7d8da; } #cssmenu > ul > li > a {   padding: 10px 20px; } #cssmenu > ul > li:hover {   border-left: 3px solid #3dbd99; } #cssmenu ul li:hover > a {   color: #3dbd99; } #cssmenu > ul > li:hover {   background: #f6f6f6; } /* Sub Menu */ #cssmenu ul ul a:link, #cssmenu ul ul a:visited {   font-weight: 400;   font-size: 14px; } #cssmenu ul ul {   width: 180px;   background: none;   border-left: 20px solid transparent; } #cssmenu ul ul a {   padding: 8px 0;   border-bottom: 1px solid #eeeeee; } #cssmenu ul ul li {   padding: 0 20px;   background: #fff; } #cssmenu ul ul li:last-child {   border-bottom: 3px solid #d7d8da;   padding-bottom: 10px; } #cssmenu ul ul li:first-child {   padding-top: 10px; } #cssmenu ul ul li:last-child > a {   border-bottom: none; } #cssmenu ul ul li:first-child:after {   content: '';   display: block;   width: 0;   height: 0;   position: absolute;   left: -20px;   top: 13px;   border-left: 10px solid transparent;   border-right: 10px solid #fff;   border-bottom: 10px solid transparent;   border-top: 10px solid transparent; }  </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></li>     <li class="has-sub"><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); /* Please Keep this font import at the very top of any CSS file */ @charset "UTF-8"; /* Starter CSS for Flyout Menu */ #cssmenu {   padding: 0;   margin: 0;   border: 0;   line-height: 1; } #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;   position: relative; } #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: 0px;   z-index: 598;   width: 100%; } #cssmenu ul ul li {   float: none; } #cssmenu ul ul ul {   top: -2px;   right: 0; } #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 {   width: 200px;   background: #333333;   font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;   zoom: 1;   font-size: 12px; } #cssmenu:before {   content: '';   display: block; } #cssmenu:after {   content: '';   display: table;   clear: both; } #cssmenu a {   display: block;   padding: 15px 20px;   color: #ffffff;   text-decoration: none;   text-transform: uppercase; } #cssmenu > ul {   width: 200px; } #cssmenu ul ul {   width: 200px; } #cssmenu > ul > li > a {   border-right: 4px solid #1b9bff;   color: #ffffff; } #cssmenu > ul > li > a:hover {   color: #ffffff; } #cssmenu > ul > li.active a {   background: #1b9bff; } #cssmenu > ul > li a:hover, #cssmenu > ul > li:hover a {   background: #1b9bff; } #cssmenu li {   position: relative; } #cssmenu ul li.has-sub > a:after {   content: '+';   position: absolute;   top: 50%;   right: 15px;   margin-top: -6px; } #cssmenu ul ul li.first {   -webkit-border-radius: 0 3px 0 0;   -moz-border-radius: 0 3px 0 0;   border-radius: 0 3px 0 0; } #cssmenu ul ul li.last {   -webkit-border-radius: 0 0 3px 0;   -moz-border-radius: 0 0 3px 0;   border-radius: 0 0 3px 0;   border-bottom: 0; } #cssmenu ul ul {   -webkit-border-radius: 0 3px 3px 0;   -moz-border-radius: 0 3px 3px 0;   border-radius: 0 3px 3px 0; } #cssmenu ul ul {   border: 1px solid #0082e7; } #cssmenu ul ul a {   font-size: 12px;   color: #ffffff; } #cssmenu ul ul a:hover {   color: #ffffff; } #cssmenu ul ul li {   border-bottom: 1px solid #0082e7; } #cssmenu ul ul li:hover > a {   background: #4eb1ff;   color: #ffffff; } #cssmenu.align-right > ul > li > a {   border-left: 4px solid #1b9bff;   border-right: none; } #cssmenu.align-right {   float: right; } #cssmenu.align-right li {   text-align: right; } #cssmenu.align-right ul li.has-sub > a:before {   content: '+';   position: absolute;   top: 50%;   left: 15px;   margin-top: -6px; } #cssmenu.align-right ul li.has-sub > a:after {   content: none; } #cssmenu.align-right ul ul {   visibility: hidden;   position: absolute;   top: 0;   left: -100%;   z-index: 598;   width: 100%; } #cssmenu.align-right ul ul li.first {   -webkit-border-radius: 3px 0 0 0;   -moz-border-radius: 3px 0 0 0;   border-radius: 3px 0 0 0; } #cssmenu.align-right ul ul li.last {   -webkit-border-radius: 0 0 0 3px;   -moz-border-radius: 0 0 0 3px;   border-radius: 0 0 0 3px; } #cssmenu.align-right ul ul {   -webkit-border-radius: 3px 0 0 3px;   -moz-border-radius: 3px 0 0 3px;   border-radius: 3px 0 0 3px; }  </style> <div id="cssmenu"> <ul>     <li><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 88 visitantes (96 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