unViciomás | Fecha: Domingo, 12/06/2011, 1:54 AM | Link del Mensaje # 1 ← |
 Oficial  STATUS: Offline |  POSTS:
 PREMIOS:  REPUTACIÓN: |
Menu desplegable en CSS
CODIGO:
<style>
ul.menu { /* es la lista principal */
background-color: #000000;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}
ul.menu li { /* cada item de la lista principal */
border: 2px solid #000000;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
-moz-border-radius: 4px;
background-color: #000;
border:2px solid #ff0000;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}
/* el ícono para desplegar el menú */
ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}
ul.menu li.drop a {
padding-right: 7px;
}
ul.menu li.drop:hover li {
border: none;
}
ul.menu li.drop span.toggle {
background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
display: block;
float: left;
height: 26px;
margin: 0 5px;
padding: 0;
width: 20px;
}
/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}
ul.menu li ul { /* la lista con el submenú */
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
background-color: transparent;
color: #DDD;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}
/* efectos sobre los items del submenú */
ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}
</style>
<body>
<ul class="menu">
<li><a href="http://unviciomas.com">Home</a></li>
<li class="drop">
<a href="#">Herramientas</a>
<span class="toggle"> </span>
<ul>
<li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
<li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
<li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
</ul>
</li>
<li><a href="URL_enlace">Contac</a></li>
<li><a href="http://unviciomas.com/index/3">Registrate</a></li>
</ul>
AYUDA A LA PAGINA, REGISTRATE!!  Un Vicio Mas - File Sharing
|
| Compartir en: | | | |
| |
MP
MP( )
PREMIOS: 
OBSERVACIONES: 
RANGO: 
