HTML代码:
Exemplo de código-fonte
<div id=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的首页
<div classe=”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 classe=”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 classe=”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 classe=”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>
Exemplo de código-
fonte
classe=”menu2″
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′”
下面看CSS代码:
Exemplo de código-fonte
corpo{
cor de fundo:branco;
tamanho da fonte: 12px;
família de fontes:Arial, Helvetica, sans-serif;
margem:0px;
preenchimento:0px;
cor:branco;
}
ul,li{
margem:0px;
preenchimento:0px;
}
li{
exibição: embutido;
estilo de lista: nenhum;
posição de estilo de lista:fora;
alinhamento de texto:centro;
peso da fonte: negrito;
flutuar:esquerda;
}
a:link{
cor:#336601;
decoração de texto: nenhum;
flutuar:esquerda;
largura:100px;
preenchimento:3px 5px 0px 5px;
}
a:visitou{
cor:#336601;
decoração de texto: nenhum;
flutuar:esquerda;
preenchimento:3px 5px 0px 5px;
largura:100px;
}
a:passar o mouse{
cor:branco;
flutuar:esquerda;
preenchimento:3px 3px 0px 20px;
largura:88px;
decoração de texto: nenhum;
cor de fundo:#539D26;
}
a:ativo{
cor:branco;
flutuar:esquerda;
preenchimento:3px 3px 0px 20px;
largura:88px;
decoração de texto: nenhum;
cor de fundo:#BD06B4;
}
#nav{
largura:600px;
altura:30px;
borda inferior:0px;
preenchimento:0px 5px;
posição:absoluta;
índice z:1;
esquerda: 198px;
superior: 25px;
}
.lista{
altura da linha: 20px;
alinhamento de texto: esquerda;
preenchimento: 4px;
peso da fonte:normal;
}
.menu1{
largura:120px;
altura:automático;
margem:6px 4px 0px 0px;
borda:1px sólido #9CDD75;
cor de fundo:#F1FBEC;
cor:#336601;
preenchimento:6px 0px 0px 0px;
cursor:mão;
overflow-y: oculto;
filtro:Alfa(opacidade=70);
-moz-opacidade:0,7;
}
.menu2{
largura:120px;
altura:18px;
margem:6px 4px 0px 0px;
cor de fundo:#F5F5F5;
cor:#999999;
borda: 1px sólido #EEE8DD;
preenchimento:6px 0px 0px 0px;
overflow-y: oculto;
cursor:mão;
}