HTML代码：
示例源代码
<div 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；
}
李{
显示：内嵌；
列表样式：无；
列表样式位置：外部；
文本对齐：居中；
字体粗细：粗体；
浮动：左；
}
一个：链接{
颜色：#336601；
文本装饰：无；
浮动：左；
宽度：100px；
内边距：3px 5px 0px 5px；
}
a:访问过{
颜色：#336601；
文本装饰：无；
浮动：左；
内边距：3px 5px 0px 5px；
宽度：100px；
}
一个：悬停{
颜色：白色；
浮动：左；
内边距：3px 3px 0px 20px；
宽度：88px；
文本装饰：无；
背景颜色：#539D26；
}
一个：活跃{
颜色：白色；
浮动：左；
内边距：3px 3px 0px 20px；
宽度：88px；
文本装饰：无；
背景颜色：#BD06B4；
}
#导航{
宽度：600px；
高度：30px；
边框底部：0px；
内边距：0px 5px；
位置：绝对；
z 索引：1；
左：198 像素；
顶部：25 像素；
}
。列表{
行高：20px；
文本对齐：左对齐；
内边距：4px；
字体粗细：正常；
}
.菜单1{
宽度：120px；
高度：自动；
边距：6px 4px 0px 0px；
边框：1px实心#9CDD75；
背景颜色：#F1FBEC；
颜色：#336601；
内边距：6px 0px 0px 0px；
光标：手；
溢出-y：隐藏；
过滤器：Alpha（不透明度=70）；
-moz-不透明度：0.7；
}
.菜单2{
宽度：120px；
高度：18px；
边距：6px 4px 0px 0px；
背景颜色：#F5F5F5；
颜色：#999999；
边框：1px实心#EEE8DD；
内边距：6px 0px 0px 0px；
溢出-y：隐藏；
光标：手；
}