Videos Tutoriales, Diseño web, Códigos HTML, Descargas, Música y mucho más

Menus verticales con submenus para tu pagina web

Menús verticales con submenús

VER DEMO

VER DEMO

VER DEMO

}
#cssmenu > ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
  /* Layout */

display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #3a3a3a;
  border-bottom: 1px dotted #1b1b1b;
  padding: 11px 20px;
  /* Typography */

font-family: Helvetica, Arial, sans-serif;
  color: #d8d8d8;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 1px #000;
  font-size: 13px;
  font-weight: 300;
  /* Background & effects */

background: #282828;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  background: #54cdf1;
  background: -webkit-linear-gradient(#72d4f2, #54cdf1);
  background: -moz-linear-gradient(#72d4f2, #54cdf1);
  background: linear-gradient(#72d4f2, #54cdf1);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

border: 4px solid transparent;
  border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

border: 4px solid transparent;
  border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #ffffff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 140px;
  /* The fade effect, created using an opacity transition */

-webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
}
</style>
<div id="cssmenu">
<ul>
    <li class="active"><a href="index.html"><span>Home</span></a></li>
    <li class="has-sub"><a href="#"><span>Products</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>Product 1</span></a>
        <ul>
            <li><a href="#"><span>Sub Item</span></a></li>
            <li class="last"><a href="#"><span>Sub Item</span></a></li>
        </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 2</span></a>
        <ul>
            <li><a href="#"><span>Sub Item</span></a></li>
            <li class="last"><a href="#"><span>Sub Item</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#"><span>About</span></a></li>
    <li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

VER DEMO

VER DEMO

display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #d9d9d9;
  padding: 11px 20px;
  /* Typography */

font-family: Helvetica, Arial, sans-serif;
  color: #e4433c;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;
  /* Background & effects */

background: #eaeaea;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu > ul li:first-child > a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu > ul li:last-child > a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #f23f37;
  background: -webkit-linear-gradient(#f23f37, #e7180f);
  background: -moz-linear-gradient(#f23f37, #e7180f);
  background: linear-gradient(#f23f37, #e7180f);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

border: 4px solid transparent;
  border-left: 4px solid #e4433c;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  /* Creating the arrow using borders */

border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 150px;
  /* The fade effect, created using an opacity transition */

-webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1;
}
</style>
<div id="cssmenu">
<ul>
    <li class="active"><a href="index.html"><span>Home</span></a></li>
    <li class="has-sub"><a href="#"><span>Products</span></a>
    <ul>
        <li class="has-sub"><a href="#"><span>Product 1</span></a>
        <ul>
            <li><a href="#"><span>Sub Item</span></a></li>
            <li class="last"><a href="#"><span>Sub Item</span></a></li>
        </ul>
        </li>
        <li class="has-sub"><a href="#"><span>Product 2</span></a>
        <ul>
            <li><a href="#"><span>Sub Item</span></a></li>
            <li class="last"><a href="#"><span>Sub Item</span></a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#"><span>About</span></a></li>
    <li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

VER DEMO

VER DEMO

¡Hoy había/n 1 visitantes (18 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

Menus verticales con submenus para tu pagina web

RADIO EN LINEA

PLANTILLAS

DESCARGAS GRATIS

PARA TU PÁGINA WEB

GENERADORES

OTRAS COSAS

Redes Sociales

En edición...

Suscríbete a mi canal