HTML代码:
Ejemplo de código fuente
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的首页
<div clase=”lista”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>社区圈子
<div clase=”lista”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的短信
<div clase=”lista”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>账户管理
<div clase=”lista”>
<a href=”http://www.onlygrape.com/“>葡提子</a><br />
<a href=”#”>我的首页</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
<a href=”#”>我的日志</a><br />
<a href=”#”>我的相册</a><br />
<a href=”#”>我的收藏</a><br />
</div>
</li>
</ul>
</div>
大家特别留意类似于以关键。
Código fuente de ejemplo
clase = "menú2"
onMouseOver=”this.className='menú1′”
onMouseOut=”this.className='menu2′”
下面看CSS代码:
ejemplo de código fuente
cuerpo{
color de fondo: blanco;
tamaño de fuente: 12px;
familia de fuentes: Arial, Helvética, sans-serif;
margen: 0px;
relleno: 0px;
color: blanco;
}
ul,li{
margen: 0px;
relleno: 0px;
}
li{
pantalla: en línea;
estilo de lista: ninguno;
posición-estilo-lista:fuera;
alineación de texto:centro;
peso de fuente: negrita;
flotador: izquierda;
}
a:enlace{
color:#336601;
decoración de texto: ninguna;
flotador: izquierda;
ancho: 100 px;
relleno: 3px 5px 0px 5px;
}
a:visitado{
color:#336601;
decoración de texto: ninguna;
flotador: izquierda;
relleno: 3px 5px 0px 5px;
ancho: 100 px;
}
a: flotar {
color: blanco;
flotador: izquierda;
relleno: 3px 3px 0px 20px;
ancho: 88px;
decoración de texto: ninguna;
color de fondo:#539D26;
}
a:activo{
color: blanco;
flotador: izquierda;
relleno: 3px 3px 0px 20px;
ancho: 88px;
decoración de texto: ninguna;
color de fondo:#BD06B4;
}
#nav{
ancho: 600 px;
altura: 30 píxeles;
borde inferior: 0px;
relleno: 0px 5px;
posición:absoluta;
índice z: 1;
izquierda: 198px;
arriba: 25px;
}
.lista{
altura de línea: 20 px;
alineación de texto: izquierda;
relleno: 4px;
peso de fuente: normal;
}
.menú1{
ancho: 120 px;
altura:automático;
margen:6px 4px 0px 0px;
borde: 1px sólido #9CDD75;
color de fondo:#F1FBEC;
color:#336601;
relleno:6px 0px 0px 0px;
cursor:mano;
desbordamiento-y: oculto;
filtro:Alfa(opacidad=70);
-moz-opacidad: 0,7;
}
.menú2{
ancho: 120 px;
altura: 18 píxeles;
margen:6px 4px 0px 0px;
color de fondo:#F5F5F5;
color:#999999;
borde: 1px sólido #EEE8DD;
relleno:6px 0px 0px 0px;
desbordamiento-y: oculto;
cursor:mano;
}