Tip: you can modify some code before running
Simple CSS touch drop-down menu<!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=utf-8" /> <title>Simple CSS touch drop-down menu</title> <style type="text/css">/* Overall settings */. navigation {margin: 0; padding: 0; width: 610px; list-style-type: none; font: 12px Arial ;}. navigation li {float: left; padding: 0; margin: 0 10px 0 0; _ margin: 0 2px 0 0 0; width: 150px;}/* Set the menu block */. navigation li dl {width: 150px;/* ie6 */margin: 0; padding: 0; background-color: # fff; border: solid 2px #666 ;}. navigation li dt ,. navigation li dd a {display: block;}/* set the main menu dt */. navigation li dt {margin: 0; padding: 5px; text-align: center; background-color: # fff; font-size: 12px; font-weight: bold; height: 15px; overflow: hidden ;}. navigation li dt ,. navigation li dt a: visited {display: block; color: #333; text-decoration: none;}/* set sub-menu dd */. navigation li dd {margin: 0; padding: 0; color: #333; background-color: # efefef; border-bottom: dotted 1px #666 ;}. navigation li dd. last {border-bottom: 0 ;}. navigation li dd ,. navigation li dd a: visited {display: block; color: #333; text-decoration: none; padding: 4px 5px 4px 20px;}/* Hide sub-menu */. navigation li dd {display: none;}/* slide the mouse into the display sub-menu */. navigation li: hover dd ,. navigation li a: hover dd {display: block;}/* ie6 hack */. navigation li: hover ,. navigation li a: hover {border: 0 ;}. navigation table {border-collapse: collapse; padding: 0; text-align: left ;}</style> </head> <body> <ul class="navigation"> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>Grooluo Education Network</dt> <dd>Webpage design</dd> <dd>PS tutorial</dd> <dd>Graphic design</dd> <dd class="last">Grooluo</dd> </dl> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>Photoshop</dt> <dd>Intractable Diseases</dd> <dd class="last">Practical examples</dd> </dl> </li> <!--[if lte IE 6]></td></tr></table><![endif]--> <li> <!--[if lte IE 6]><table><tr><td><![endif]--> <dl> <dt>Css</dt> <dd>Practical cases</dd> <dd class="last">Auxiliary tools</dd> </dl> <!--[if lte IE 6]></td></tr></table><![endif]--> </li> </ul> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><div align="center">Reprinted please note: broken Luo more code: China WEB first stop http://www.111cn.net</div></body> </html>
Tip: you can modify some code before running
