Pure CSS Implementation level two drop-down navigation menu

This is a pure CSS menu, two-level dropdown navigation effect, is the most concise CSS navigation menu, compatibility is also very good, IE7/8, Firefox and other support, and it is to learn CSS menu writing typical tutorial, let you learn a lot of CSS skills.

The results are as follows:

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en""HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; charset=gb2312"/> <title> Pure CSS menu </title> <style type="Text/css">* {font-family:"Song Body"; margin:0;p adding:0;} body {padding:15px;}. Nav Li Li a {display:inline-Block;}. Nav Li Li a {display:block;}. Nav ul {List-style-type:none;margin:0;p adding:0;}. Nav ul Li {float: left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;p adding:0; margin:0; width:120px;}. Nav ul Li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555; text-decoration:none;background: #f7f7f7;}. Nav ul Table {width: -%;border-collapse:collapse;border:0;p adding:0; margin:0;}. Nav ul Li ul {display:none;}. Nav UL Li:hover,.nav ul Li A:hover,.nav ul li a:active {color:red;background-color: #f1f1f1;}. Nav ul Li:hover Ul,.nav ul li A:hover Ul,.nav ul Li A:active ul {display:block;width: -%;}. Nav ul ul li {display:block;width: -%; border:none;}. Nav ul ul Li A{display:block;color:blue;border:none;}</style> class="nav"><ul><li><a href="#">Home Page<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> Latest update </a></li><li><a href="#"> Downloads </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [Endif]--></li><li><a href="#">ASP<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> Enterprise Whole station </a></li><li><a href="#"> Photo Album </a></li><li><a href="#"> Community Programs </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [Endif]--></li><li><a href="#">PHP<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> Blog Micro bo </a></li><li><a href="#"> Forum Community </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [Endif]--></li><li><a href="#">JSP<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> Enterprise </a></li><li><a href="#"> News System </a></li><li><a href="#"> Messages </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [Endif]--></li><li><a href="#">VC++<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> Database </a></li><li><a href="#"> Interface </a></li><li><a href="#"> Encryption </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [Endif]--></li><li><a href="#">DELPHI<!--[ifIe7]><!--></a><!--<! [Endif]--><table cellpadding="0"cellspacing="0"><tr><td><ul><li><a href="#"> System-related </a></li><li><a href="#"> Algorithm </a></li><li><a href="#"> Databases </a></li></ul></td></tr></table><!--[ifLTE IE6]></a><! [endif]--></li></ul></div></body>
Pure CSS Implementation level two drop-down navigation menu