HTML :
Exemple de code source
<div id="nav">
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>我的首页
<div class="liste">
<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 class="liste">
<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 class="liste">
<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 class="liste">
<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>
Exemple de code
source
classe = "menu2"
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′”
下面看CSS代码：
Exemple de code source
corps{
couleur d'arrière-plan : blanc ;
taille de police : 12 px ;
famille de polices : Arial, Helvetica, sans-serif ;
marge : 0px ;
remplissage : 0 px ;
couleur : blanc ;
}
ul,li{
marge : 0px ;
remplissage : 0 px ;
}
li{
affichage:en ligne;
style de liste : aucun ;
position-style-liste : extérieur ;
texte-align:centre;
poids de la police : gras ;
flotteur : gauche ;
}
a:lien{
couleur : #336601 ;
décoration de texte : aucune ;
flotteur : gauche ;
largeur : 100 px ;
remplissage : 3px 5px 0px 5px ;
}
a:visité{
couleur : #336601 ;
décoration de texte : aucune ;
flotteur : gauche ;
remplissage : 3px 5px 0px 5px ;
largeur : 100 px ;
}
a:survoler{
couleur : blanc ;
flotteur : gauche ;
remplissage : 3px 3px 0px 20px ;
largeur : 88 px ;
décoration de texte : aucune ;
couleur d'arrière-plan : #539D26 ;
}
a:actif{
couleur : blanc ;
flotteur : gauche ;
remplissage : 3px 3px 0px 20px ;
largeur : 88 px ;
décoration de texte : aucune ;
couleur d'arrière-plan :#BD06B4 ;
}
#nav{
largeur : 600 px ;
hauteur : 30 px ;
bordure inférieure : 0px ;
remplissage : 0px 5px ;
position : absolue ;
indice z : 1 ;
gauche : 198px ;
haut : 25px ;
}
.lister{
hauteur de ligne : 20 px ;
texte-align:gauche;
remplissage : 4 px ;
poids de la police : normal ;
}
.menu1{
largeur : 120 px ;
hauteur : auto ;
marge : 6px 4px 0px 0px ;
bordure : 1px solide #9CDD75 ;
couleur d'arrière-plan : #F1FBEC ;
couleur : #336601 ;
remplissage :6px 0px 0px 0px ;
curseur:main;
débordement-y: caché ;
filtre:Alpha(opacité=70);
-moz-opacité : 0,7 ;
}
.menu2{
largeur : 120 px ;
hauteur : 18 px ;
marge : 6px 4px 0px 0px ;
couleur d'arrière-plan : #F5F5F5 ;
couleur : #999999 ;
bordure : 1px solide #EEE8DD ;
remplissage :6px 0px 0px 0px ;
débordement-y: caché ;
curseur:main;
}