AlmacenSecreto

No estás conectado. Conéctate o registrate

Menú horizontal drop & down con CSS

Ir abajo  Mensaje [Página 1 de 1.]

1 Menú horizontal drop & down con CSS el Dom Sep 05, 2010 2:13 am

netway


Admin


Codigo css
Código:
#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 */ }


Codigo onde quieres que valla el menu:

Código:
<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>

Ver perfil de usuario http://almacensecreto.activosforos.com

Volver arriba  Mensaje [Página 1 de 1.]

Permisos de este foro:
No puedes responder a temas en este foro.