HTML代码:
예제 소스 코드
<사업부 ID=”nav”>
<ul>
<li class=”menu2″ onMouseOver=”this.className='menu1′” onMouseOut=”this.className='menu2′”>내가 좋아하는 것
<div 클래스=”목록”>
<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 클래스=”목록”>
<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 클래스=”목록”>
<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 클래스=”목록”>
<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>
大家特别留意类似于以下代码的HTML。这是变换的关键。
예제 소스 코드
클래스=”메뉴2″
onMouseOver=”this.className='menu1′”
onMouseOut=”this.className='menu2′”
하단 CSS대신:
예제 소스 코드
몸{
배경색:흰색;
글꼴 크기:12px;
글꼴 모음:Arial, Helvetica, sans-serif;
여백:0px;
패딩:0px;
색상: 흰색;
}
ul,li{
여백:0px;
패딩:0px;
}
리{
표시:인라인;
목록 스타일:없음;
목록 스타일 위치:외부;
텍스트 정렬:가운데;
글꼴 두께:굵게;
부동:왼쪽;
}
a:링크{
색상:#336601;
텍스트 장식:없음;
부동:왼쪽;
너비:100px;
패딩:3px 5px 0px 5px;
}
a:방문{
색상:#336601;
텍스트 장식:없음;
부동:왼쪽;
패딩:3px 5px 0px 5px;
너비:100px;
}
a:호버{
색상: 흰색;
부동:왼쪽;
패딩:3px 3px 0px 20px;
너비:88px;
텍스트 장식:없음;
배경색:#539D26;
}
a:활성{
색상: 흰색;
부동:왼쪽;
패딩:3px 3px 0px 20px;
너비:88px;
텍스트 장식:없음;
배경색:#BD06B4;
}
#nav{
너비:600px;
높이:30px;
테두리 하단:0px;
패딩:0px 5px;
위치:절대;
Z-색인:1;
왼쪽: 198px;
상단: 25px;
}
.목록{
줄 높이:20px;
텍스트 정렬:왼쪽;
패딩:4px;
글꼴 두께:일반;
}
.menu1{
너비:120px;
높이:자동;
여백:6px 4px 0px 0px;
테두리:1px 솔리드 #9CDD75;
배경색:#F1FBEC;
색상:#336601;
패딩:6px 0px 0px 0px;
커서:손;
오버플로-y:숨김;
필터:알파(불투명도=70);
-moz-불투명도:0.7;
}
.menu2{
너비:120px;
높이:18px;
여백:6px 4px 0px 0px;
배경색:#F5F5F5;
색상:#999999;
테두리:1px 솔리드 #EEE8DD;
패딩:6px 0px 0px 0px;
오버플로-y:숨김;
커서:손;
}