效果体验：http://hovertree.com/texiao/css/3.htm
HTML文件代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁的HTML+CSS下拉菜单-HoverTree</title><base target="_blank" /> <link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- 代码 开始 --> <h1>简洁的HTML+CSS下拉菜单</h1> <nav class="nav"> <ul class="nav_menu"> <li class="nav_menu-item"><a href="http://hovertree.com/" target="_blank">首页</a></li> <li class="nav_menu-item"> <a href="http://hovertree.com/menu/css/" target="_blank">CSS</a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a href="http://hovertree.com/menu/downjquery/" target="_blank">jQuery下载</a></li> <li class="nav_submenu-item"> <a href="http://hovertree.com/guestbook/addmessage.aspx" target="_blank">留言</a></li> <li class="nav_submenu-item"> <a href="http://hovertree.com/texiao/" target="_blank">特效</a></li> </ul> </li> <li class="nav_menu-item"> <a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm" target="_blank">关于</a> <ul class="nav_submenu"> <li class="nav_submenu-item"> <a href="http://hovertree.com/shortanswer/" target="_blank">简答题</a></li> <li class="nav_submenu-item"> <a href="http://tool.keleyi.com/" target="_blank">工具</a></li> <li class="nav_submenu-item"><a href="http://hovertree.com/menu/csharp/" target="_blank">C#</a></li> <li class="nav_submenu-item"><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">原文</a></li> </ul> </li> <li class="nav_menu-item"><a href="http://keleyi.com/" target="_blank">柯乐义</a></li> <li class="nav_menu-item"><a href="http://hovertree.com/hvtimg/" target="_blank">图片</a></li> </ul> </nav> <!-- 代码 结束 --> </body> </html>
使用方法：
1、在head区域引入样式表文件
<link href="http://hovertree.com/texiao/css/3/hovertreecss3.css" rel="stylesheet" type="text/css" />
2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可
3、注意ul和li的嵌套关系，以及一级和二级菜单样式的选择，即可做出你想要的导航菜单效果。