Effect Experience: http://hovertree.com/texiao/css/3.htm
HTML file Code:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><title>Simple Html+css drop-down menu-hovertree</title><BaseTarget= "_blank" /><Linkhref= "Http://hovertree.com/texiao/css/3/hovertreecss3.css"rel= "stylesheet"type= "Text/css" /></Head><Body><!--Code Start -<H1>Simple Html+css drop-down menu</H1><navclass= "NAV"><ulclass= "Nav_menu"><binclass= "Nav_menu-item"><ahref= "http://hovertree.com/"Target= "_blank">Home</a></Li><Liclass= "Nav_menu-item"><ahref= "http://hovertree.com/menu/css/"Target= "_blank">Css</a><ulclass= "Nav_submenu"><Liclass= "Nav_submenu-item"> <ahref= "http://hovertree.com/menu/downjquery/"Target= "_blank">jquery download</a></Li><Liclass= "Nav_submenu-item"> <ahref= "Http://hovertree.com/guestbook/addmessage.aspx"Target= "_blank">Message</a></Li><Liclass= "Nav_submenu-item"> <ahref= "http://hovertree.com/texiao/"Target= "_blank">Effects</a></Li></ul></Li><Liclass= "Nav_menu-item"><ahref= "Http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm"Target= "_blank">About</a><ulclass= "Nav_submenu"><Liclass= "Nav_submenu-item"> <ahref= "http://hovertree.com/shortanswer/"Target= "_blank">Brief answer</a></Li><Liclass= "Nav_submenu-item"> <ahref= "http://tool.keleyi.com/"Target= "_blank">Tools</a></Li><Liclass= "Nav_submenu-item"><ahref= "http://hovertree.com/menu/csharp/"Target= "_blank">C#</a></Li><Liclass= "Nav_submenu-item"><ahref= "Http://hovertree.com/hvtart/bjae/g71ha4qs.htm">Original</a></Li></ul></Li><binclass= "Nav_menu-item"><ahref= "http://keleyi.com/"Target= "_blank">Collayi</a></Li><Liclass= "Nav_menu-item"><ahref= "http://hovertree.com/hvtimg/"Target= "_blank">Image</a></Li></ul></nav><!--End of Code -</Body></HTML>
How to use:
1. Introduce the style sheet file in the head area
<link href= "Http://hovertree.com/texiao/css/3/hovertreecss3.css" rel= "stylesheet" type= "Text/css"/>
2. Add <!--code to your Web page start--><!--code End---Comment area code
3, pay attention to the relationship between UL and Li's nesting, as well as the first level and two level menu style selection, you can make the navigation menu effect you want.
Web Front End: http://www.cnblogs.com/jihua/p/webfront.html
Ultra-simple CSS drop-down menu