Pedazo de post.. felicidades...
Tengo una duda... lo intento pero no loc onsigo.
¿Qué tengo que dupplicar y modificar para poder diferenciar el aspecto de los 2 niveles?
Es decir.. que nivel1 tenga un estilo .. y el 2º nivel, lo llamaré nivel2.. tenga otro.
Os pongo lo que creo, a falta de cambiar colores.... a ver si voy bien...
Gracias
Código:
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
/* ========================= */
#menu ul li.nivel2 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
/* ========================= */
#menu ul li a:hover, #menu ul li:hover a.nivel2 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
/* ========================= */
#menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
/* ========================= */
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
... para ...
Código:
<div id="menu">
<UL id='nav'>
<LI class='nivel1'><a href='#'TARGET='_self' class='nivel1'>la empresa</a>
<UL>
<LI class='nivel2'><a href='vOpcionesMenuxID/633DEA748C5ED6C5C1257830003B58F2?OpenDocument'TARGET='_self' class='nivel2'>presentación</a></LI>
<LI class='nivel2'><a href='vOpcionesMenuxID/163B031766956115C1257830003B6E84?OpenDocument'TARGET='_self' class='nivel2'>misión</a></LI>
<LI class='nivel2'><a href='vOpcionesMenuxID/A97F7A16EF2340EBC1257830003B7378?OpenDocument'TARGET='_self' class='nivel2'>visión</a></LI>
<LI class='nivel2'><a href='vOpcionesMenuxID/EE4E015945F4DCD4C1257830003B778C?OpenDocument'TARGET='_self' class='nivel2'>valores corporativos</a></LI>
<LI class='nivel2'><a href='vOpcionesMenuxID/FF6C0E866A4156F0C1257830003B7E0C?OpenDocument'TARGET='_self' class='nivel2'>sectores</a></LI>
</UL>
</LI>
<LI class='nivel1'><a href='$$ViewTemplate for wvNoticiasWeb?Open'TARGET='_self' class='nivel1'>noticias</a></LI>
<LI class='nivel1'><a href='wfUnete?Open'TARGET='_self' class='nivel1'>únete a nosotros</a></LI>
<LI class='nivel1'><a href='vOpcionesMenuxID/F6D80F21D406421AC1257830003B320F?OpenDocument'TARGET='_self' class='nivel1'>intranet</a></LI>
<LI class='nivel1'><a href='vOpcionesMenuxID/CC950127AA0A66EAC1257830003B35C0?OpenDocument'TARGET='_self' class='nivel1'>contacto</a></LI>
</UL>
</div>