主要使用css的hover伪类来实现该功能。
主要思路：先搭出三级菜单的框架，然后使用css的：hover来实现！
对li添加类selected，对该类添加position:relative属性，然后对其二级三级菜单添加position:absolute属性，并设置其top:-1px（因为有1像素的边框）left:-999px；使其在也页面中向左偏移出窗口。
对li设置：hover伪类，当鼠标指针移动到li上时，改变二级三级菜单的left值，这样就可以实现一个简单的三级导航菜单！
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>三级导航菜单</title> <style type="text/css"> body{font-size: 12px;} .menu1, .menu1 ul { list-style: none; width: 120px; background-color: #f9f9f9; border: 1px solid #ccc; border-bottom: 0; margin: 0; padding: 0; text-align: left; text-indent: 10px; } .menu1 a:hover { color: #336666; background-color: #F5E3C0; } .menu1 a { display: block; text-decoration: none; color: #000; border-bottom: 1px solid #ccc; width: 120px; line-height: 22px; } .menu1 .active { position: relative; } .menu1 li:hover ul ul { left: -999px; } .menu1 li:hover ul { left: 120px; } .menu1 li li:hover ul { position: absolute; left: 120px; } .menu1 .active ul { position: absolute; top: -1px; left: -999px; } </style> </head> <body> <div class="menu"> <ul class="menu1"> <li><a href="###">Home</a></li> <li><a href="###">About Me</a></li> <li class="active"><a>Tutorials</a> <ul> <li><a href="###">Submenu1</a></li> <li><a href="###">Submenu2</a></li> <li class="active"><a href="">Submenu3</a> <ul> <li><a href="###">Submenu31</a></li> <li><a href="###">Submenu32</a></li> <li><a href="###">Submenu33</a></li> <li><a href="###">Submenu34</a></li> <li><a href="###">Submenu35</a></li> </ul> </li> <li><a href="###">Submenu4</a></li> <li><a href="###">Submenu5</a></li> </ul> </li> <li><a href="###">Gallery</a></li> <li><a href="###">Contact Me</a></li> </ul> </div> </body> </html>