Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>Pure CSS menu</title> <style type="text/css">* {Font-family: ""; margin: 0; padding: 0;} body {padding: 15px ;}. nav li a {display: inline-block ;}. nav li a {display: block ;}. nav ul {list-style-type: none; margin: 0; padding: 0 ;}. nav ul li {float: left; line-height: 24px; display: block; border-bottom: dashed # ccc 1px; font-size: 0; padding: 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: 100%; border-collapse: collapse; border: 0; padding: 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: 100% ;}. nav ul li {display: block; width: 100%; border: none ;}. nav ul li a {display: block; color: blue; border: none ;}</style> </head> <body> <div class="nav"> <ul> <li>Homepage<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>Latest update</li> <li>Download ranking</li> </ul></td> </tr> </table> </li> <li>ASP<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>Enterprise whole site</li> <li>Image Album</li> <li>Community programs</li> </ul></td> </tr> </table> </li> <li>PHP<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>Blog & microblog</li> <li>Forum community</li> </ul></td> </tr> </table> </li> <li>JSP<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>Enterprise</li> <li>News system</li> <li>Message</li> </ul></td> </tr> </table> </li> <li>VC ++<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>Database</li> <li>Interface</li> <li>Encryption</li> </ul></td> </tr> </table> </li> <li>DELPHI<table cellpadding="0" cellspacing="0"> <tr> <td><ul> <li>System problems</li> <li>Algorithm</li> <li>Database</li> </ul></td> </tr> </table> </li> </ul> </div> </body> </html> </td> </tr></table>
Tip: you can modify some code before running
