estilo-css

menus

[Material prediseñado] menus:
Te ofrecemos menus javascript avanzados para tu pagina web, son menus comodos y facil de modificación.

Aquí podrás encontrar, algunos menús, horizontales y verticales, con estructura en css y javascript.

Menú horizontal drop & down con CSS

Código CSS:

#menu ul { margin: 0; padding: 0; list-style: none; }  #menu li {  float: left; position: relative; width: 140px; /* Ancho de las pestañas */ }  #menu li ul { position: absolute; display: block;  top: 2em; left: 0; }  #menu li>ul { top: auto; left: auto; }  #menu li:hover ul { display: block; } #menu li:hover>ul { visibility:visible; } #menu ul ul { visibility:hidden; }  #menu ul, li { margin: 0 0 0 0; }  #menu ul a { display: block; text-decoration: none; color: #777; /* Color del texto de las pestañas */ background: #f9f9f9; /* Color de fondo de las pestañas */ padding: 5px; border: 1px solid #ccc; /* Borde de las pestañas */ text-align: center; /* Alineación del texto */ }  #menu ul a:hover {  color: #E2144A; /* Color del texto al pasar el cursor */ }   #menu li ul a { text-align: left; text-decoration: none; color: #777; /* Color del texto de las subpestañas */ background: #fff; /* Color de fondo de las subpestañas */ border: 1px solid #ccc; /* Borde de las subpestañas */ padding: 5px;  }   #menu li ul a:hover {  color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */ background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */ }

Código donde quieras que vaya el menú:

<div id="menu"> <ul id="menuList"> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 1</a></li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 2.3</a></li> </ul> </li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 3.3</a></li> </ul> </li> <li><a class="submenu" href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4</a>  <ul> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.1</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.2</a></li> <li><a href="URL del enlace" _fcksavedurl="URL del enlace">Pestaña 4.3</a></li> </ul> </li> </ul> </div>

Menú horizontal con marquesina