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><!-- www.111cn.net 网站标准化 2007-4-16 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>The drop-down menu of pure CSS supports IE6 IE7 Firefox --www.111cn.net website standardization</title><style type="text/css">* {Margin: 0; padding: 0 ;}. menu {font-size: 12px; position: relative; z-index: 100 ;}. menu ul {list-style: none ;}. menu li {float: left; position: relative ;}. menu ul {visibility: hidden; position: absolute; left: 3px; top: 23px ;}. menu table {position: absolute; top: 0; left: 0 ;}. menu ul li: hover ul ,. menu ul a: hover ul {visibility: visible ;}. menu a {display: block; border: 1px solid # aaa; background: red; padding: 2px 10px; margin: 3px; color: # fff; text-decoration: none ;}. menu a: hover {background: # f2cdb0; color: # f00; border: 1px solid red ;}. menu ul {}. menu ul li {clear: both; text-align: left; font-size: 12px ;}. menu ul li a {display: block; width: 100px; height: 13px; margin: 0; border: 0; border-bottom: 1px solid red ;}. menu ul li a: hover {border: 0; background: # f2cdb0; border-bottom: 1px solid # fff ;}</style> </head> <body> <div class="menu"> <ul> <li>XHTML/CSS<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li>Standard</li> <li>Tutorial</li> <li>Technical articles</li> <li>FAQs</li> <li>Layout tutorial topics</li> <li>CSS menu</li> <li>Browser compatibility</li> <li>Scroll bar</li> <li>Topics on rounded rectangle</li> <li>Special CSS effect appreciation topic</li> </ul> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li>AJAX<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li>AJAX tutorial</li> <li>AJAX technology</li> </ul> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li>Javascript<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li>JSON</li> <li>Technical articles</li> </ul> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li>DOM</li> <li>XML</li> <li>Regular expression<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li>Introduction to regular expressions</li> <li>Regular expression</li> </ul> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li>Website Optimization</li> <li>Computer network</li> <li>Website Construction Technology<!--[if IE 7]><!--><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li>PHP</li> <li>ASP</li> <li>ASP. NET</li> <li>JSP</li> <li>SQL</li> <li>Flash</li> <li>Dreamweaver</li> </ul> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> </ul> </div> <br /></body> </html>
Tip: you can modify some code before running