Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Compatible with mainstream browsers and pure CSS drop-down menu</title><style type="text/css">. Menu {font-family: verdana, sans-serif; width: 750px; position: relative; font-size: 0.85em; padding-bottom: 250px ;}. menu ul {padding: 0; margin: 0; list-style-type: none ;}. menu ul li {float: left; position: relative ;}. menu ul li ,. menu ul li a: visited {display: block; text-decoration: none; color: #000; width: 139px; height: 3em; color: #000; border: 1px solid # fff; border-width: 1px 1px 0 0; background: # dfc184; padding-left: 10px; line-height: 3em;} * html. menu ul li ,. menu ul li a: visited {width: 149px; width: 139px ;}. menu ul li ul {display: none;} table {margin:-1px; border-collapse: collapse; font-size: 1em;}/* specific to non IE browsers */. menu ul li: hover a {color: # fff; background: # bd8d5e ;}. menu ul li: hover ul {display: block; position: absolute; top: 3em; margin-top: 1px; left: 0; width: 150px ;}. menu ul li: hover ul li ul {display: none ;}. menu ul li: hover ul li a {display: block; background: # faeec7; color: #000; height: auto; line-height: 1.2em; padding: 5px 10px; width: 129px }. menu ul li: hover ul li. drop {background: # c9c9a7 ;}. menu ul li: hover ul li a: hover {background: # c9c9a7; color: #000 ;}. menu ul li: hover ul {display: block; position: absolute; left: 150px; top: 0; width: 150px ;}. menu ul li: hover ul. left {left:-150px ;}</style><!--[if lte IE 6]><style type="text/css">.menu ul li a:hover {color:#fff; background:#bd8d5e;}.menu ul li a:hover ul {display:block; position:absolute; top:3em; left:0;background:#fff;margin-top:0;margin-top:1px;}.menu ul li a:hover ul li a {display:block; background:#dbe4ab; color:#000; height:auto; line-height:1.5em; padding:5px 10px; width:150px;width:129px;}.menu ul li a:hover ul li a.drop {background:#c9c9a7;}.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; height:0; width:0;}.menu ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; top:0; color:#000;left:150px;}.menu ul li a:hover ul li a:hover ul.left {left:-150px;}</style><![endif]--></head><body><div class="menu"><ul><li><a class="drop" href="http://www.111cn.net/">DEMOS<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>Zero dollars advertising page</li> <li>Wrapping text around images</li> <li>Styled form</li> <li>Active focus</li> <li><a class="drop" href="http://www.111cn.net/" title="Hover/click with no active/focus borders">Hover/click with no borders<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>Styled form</li> <li>Removing active/focus borders</li> <li>Hover/click</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--> </li> <li class="upone">Shadow boxing</li> <li>Image map for detailed information</li> <li>Fun with background images</li> <li>Fade scrolling</li> <li>Em image sizes compared</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>BOXES<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>A coded list of spies</li> <li>Vertical menu</li> <li>Enlarging unordered list</li> <li>Link images</li> <li>Non-rectangular</li> <li>Jigsaw links</li> <li>Circular links</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>MOZILLA<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>Drop down menu</li> <li>Cascading menu</li> <li>Content:</li> <li>Mozzie box</li> <li>I can build a rainbow with transparent borders</li> <li>A snooker cue using border art</li> <li>Target practice</li> <li>Two tone headings</li> <li>Shadow text</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>EXPLORER<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>The first example for Internet Explorer</li> <li>Weft fonts</li> <li>Vertically aligning text</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li><li>OPACITY<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul> <li>A color wheel using opaque colours</li> <li>A menu using opacity</li> <li>Partial opacity</li> <li>Partial opacity II</li> <li><a class="drop" href="http://www.111cn.net/" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--><!--<![endif]--><table><tr><td> <ul class="left"> <li>Styled form</li> <li>Removing active/focus borders</li> <li>Hover/click</li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--> </li> </ul></td></tr></table><!--[if lte IE 6]><![endif]--></li></ul></div></body></html>
Tip: you can modify some code before running
