esto esta probado y funciona:
es vital para su funcionamiento usar el diseño css. debemos ir a diseño:
y en la parte de css incluir este codigo:
Cita: body{
background:#fff;
}
/* Root = Horizontal, Secondary = Vertical */
ul#menu {
ba
margin: 0;
border: 0 none;
padding: 0;
/* width: 500px;*/ /*For KHTML*/
width:360px;
list-style: none;
height: 20px;
border:1px solid #eee;
padding-bottom:5px;
}
ul#menu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 20px;
}
ul#menu li{
padding-bottom:5px;
}
ul#menu li:hover{
background:#ddd;
}
ul#menu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 25px;
left: 10px;
background: #eee;
border: none;
opacity: 0.8;
-moz-opacity: 0.8;
filter:alpha(opacity=80);
}
ul#menu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#menu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#menu a {
padding: 5px 15px 5px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
color: #9fcf21;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/* border-right:1px solid #818181;*/
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#menu a:hover,
ul#menu li:hover a,
ul#menu li.iehover a {
color: #003300;
}
/* 2nd Menu */
ul#menu li:hover li a,
ul#menu li.iehover li a {
float: none;
border:none;
}
/* 2nd Menu Hover Persistence */
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background:#ddd;
color: #003300;
}
/* 3rd Menu */
ul#menu li:hover li:hover li a,
ul#menu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#menu li:hover li:hover li a:hover,
ul#menu li:hover li:hover li:hover a,
ul#menu li.iehover li.iehover li a:hover,
ul#menu li.iehover li.iehover li.iehover a {
background:#ddd;
color: #FFF;
}
/* 4th Menu */
ul#menu li:hover li:hover li:hover li a,
ul#menu li.iehover li.iehover li.iehover li a {
background:#ddd;
color: #666;
}
/* 4th Menu Hover */
ul#menu li:hover li:hover li:hover li a:hover,
ul#menu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#menu ul ul,
ul#menu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#menu li:hover ul ul,
ul#menu li:hover ul ul ul,
ul#menu li.iehover ul ul,
ul#menu li.iehover ul ul ul {
display: none;
}
ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}
ul#menu .selected{
color: #003300;
}
podemos personalizarle los colores y tamaño.
una vez puesto la estructura, viene la parte menu, justo encima veremos la caja "texto encima de la pagina"
en el debemos poner el siguiente:
Cita: <!-- MENU -->
<ul id="menu">
<li><a class="selected" tihref="#">Inicio</a></li>
<li><a href="#">pagina 2</a>
<ul>
<li><a href="#">subpagina 1 de pagina 2</a></li>
<li><a href="#">subpagina 2 de pagina 2</a></li>
</ul>
</li>
<li><a href="#">pagina 3</a></li>
<li><a href="#">pagina 4</a></li>
</ul>
en las almuadillas "#" debemos poner las rutas exactas de las paginas.
en la parte subpagina son los desplegables, cuando pasamos el raton estos se deplegan, solo es un ejemplo, repitan el proceso, en las partes deseadas.
------
 ¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui______________  
10 años ayudando a la comunidad!!
>las cuestiones de problemas con webs se atienden en el foro.
>Ticket a: ayuda@paginawebgratis.es -- Reportes a: support-es@webme.com
Ultima edición por javidj el Mie Nov 21, 2012 5:07 pm; editado 4 veces
|
