HTML-Code:
Beispiel-Quellcode
<div id=“nav“>
<ul>
<li class=“menu2″ onMouseOver=“this.className='menu1′“ onMouseOut=“this.className='menu2′“>我的首页
<div class=“list“>
<a href=“http://www.onlygrape.com/“>葡提子</a><br />
<a href=“#“>我的首页</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
</div>
</li>
<li class=“menu2″ onMouseOver=“this.className='menu1′“ onMouseOut=“this.className='menu2′“>社区圈子
<div class=“list“>
<a href=“http://www.onlygrape.com/“>葡提子</a><br />
<a href=“#“>我的首页</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
</div>
</li>
<li class=“menu2″ onMouseOver=“this.className='menu1′“ onMouseOut=“this.className='menu2′“>我的短信
<div class=“list“>
<a href=“http://www.onlygrape.com/“>葡提子</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
</div>
</li>
<li class=“menu2″ onMouseOver=“this.className='menu1′“ onMouseOut=“this.className='menu2′“>账户管理
<div class=“list“>
<a href=“http://www.onlygrape.com/“>葡提子</a><br />
<a href=“#“>我的首页</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
<a href=“#“>Weitere Informationen</a><br />
</div>
</li>
</ul>
</div>
Beispiel-
Quellcode
class=“menu2“
onMouseOver=“this.className='menu1′“
onMouseOut=“this.className='menu2′
“
Beispielquellcode
Körper{
Hintergrundfarbe:weiß;
Schriftgröße:12px;
Schriftfamilie:Arial, Helvetica, serifenlos;
Rand:0px;
Polsterung:0px;
Farbe: weiß;
}
ul,li{
Rand:0px;
Polsterung:0px;
}
li{
Anzeige:inline;
Listenstil:none;
Listenstilposition:außen;
text-align:center;
Schriftstärke:fett;
float:left;
}
a:link{
Farbe:#336601;
Textdekoration: keine;
float:left;
Breite: 100 Pixel;
Polsterung: 3px 5px 0px 5px;
}
a:besucht{
Farbe:#336601;
Textdekoration: keine;
float:left;
Polsterung: 3px 5px 0px 5px;
Breite: 100 Pixel;
}
a:hover{
Farbe: weiß;
float:left;
Polsterung: 3px 3px 0px 20px;
Breite:88px;
Textdekoration: keine;
Hintergrundfarbe:#539D26;
}
a:aktiv{
Farbe: weiß;
float:left;
Polsterung: 3px 3px 0px 20px;
Breite:88px;
Textdekoration: keine;
Hintergrundfarbe:#BD06B4;
}
#nav{
Breite:600px;
Höhe:30px;
border-bottom:0px;
Polsterung:0px 5px;
Position:absolut;
Z-Index:1;
links: 198px;
oben: 25px;
}
.Liste{
Zeilenhöhe:20px;
text-align:left;
Polsterung:4px;
Schriftstärke:normal;
}
.menu1{
Breite: 120 Pixel;
Höhe:auto;
Rand: 6px 4px 0px 0px;
Grenze: 1 Pixel fest #9CDD75;
Hintergrundfarbe:#F1FBEC;
Farbe:#336601;
Polsterung:6px 0px 0px 0px;
Cursor:Hand;
overflow-y:hidden;
filter:Alpha(Opazität=70);
-moz-opazität:0,7;
}
.menu2{
Breite: 120 Pixel;
Höhe: 18px;
Rand: 6px 4px 0px 0px;
Hintergrundfarbe:#F5F5F5;
Farbe:#999999;
Grenze:1px fest #EEE8DD;
Polsterung:6px 0px 0px 0px;
overflow-y:hidden;
Cursor:Hand;
}