Tip: you can modify some code before running
Classic css 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>Drop-down menu-http://www.111cn.net</title><style type="text/css">/* Common styling */. menu_top {font-family: arial, sans-serif; position: relative; margin: 0; font-size: 11px; margin: 50px 0 ;}. menu_top ul li ,. menu_top ul li a: visited {display: block; text-decoration: none; color: #000; width: Pixel px; height: 20px; text-align: center; color: # fff; border: 1px solid # fff; background: #710069; line-height: 20px; font-size: 11px; overflow: hidden ;}. menu_top ul {padding: 0; margin: 0; list-style-type: none ;}. menu_top ul li {float: left; margin-right: 1px; position: relative ;}. menu_top ul li ul {display: none;}/* specific to non IE browsers */. menu_top ul li: hover a {color: # fff; background: # 36f ;}. menu_top ul li: hover ul {display: block; position: absolute; top: 21px; left: 0; width: 105px ;}. menu_top ul li: hover ul li. hide {background: #6a3; color: # fff ;}. menu_top ul li: hover. hide {background: # 6fc; color: #000 ;}. menu_top ul li: hover ul li ul {display: none ;}. menu_top ul li: hover ul li a {display: block; background: # ddd; color: #000 ;}. menu_top ul li: hover ul li a: hover {background: # 6fc; color: #000 ;}. menu_top ul li: hover ul {display: block; position: absolute; left: 105px; top: 0 ;}. menu_top ul li: hover ul. left {left:-105px ;}</style><!--[if lte IE 6]><style type="text/css">.menu_top ul li a.hide, .menu_top ul li a:visited.hide {display:none;}.menu_top ul li a:hover ul li a.hide {display:none;}.menu_top ul li a:hover {color:#fff; background:#36f;}.menu_top ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}.menu_top ul li a:hover ul li a.sub {background:#6a3; color:#fff;}.menu_top ul li a:hover ul li a {display:block; background:#ddd; color:#000;}.menu_top ul li a:hover ul li a ul {visibility:hidden;}.menu_top ul li a:hover ul li a:hover {background:#6fc; color:#000;}.menu_top ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}.menu_top ul li a:hover ul li a:hover ul.left {left:-105px;}</style><![endif]--></head><body><div class="menu_top"><ul><li>DEMOS<!--[if lte IE 6]>DEMOS<table><tr><td><![endif]--> <ul> <li>Zero dollars</li> <li>Wrapping text</li> <li>Styled form</li> <li>Active focus</li> <li>HOVER/CLICK><!--[if lte IE 6]> <a class="sub" href="http://www.111cn.net" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li>Styled form</li> <li>Active focus</li> <li>Hover/click</li> </ul> <!--[if lte IE 6]> </td></tr></table> <![endif]--> </li> <li>Shadow boxing</li> <li>Image map</li> <li>Fun backgrounds</li> <li>Fade scrolling</li> <li>Em sized images</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>MENUS<!--[if lte IE 6]>MENUS<table><tr><td><![endif]--> <ul> <li>Spies menu</li> <li>Vertical menu</li> <li>Enlarging list</li> <li>Link images</li> <li>Non-rectangular</li> <li>Jigsaw links</li> <li>Circular links</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>LAYOUTS<!--[if lte IE 6]>LAYOUTS<table><tr><td><![endif]--> <ul> <li>Fixed 1</li> <li>Fixed 2</li> <li>Fixed 3</li> <li>Fixed 4</li> <li>Minimum width</li> </ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul></div></body></html>This code is provided by the webpage special effect network.
Tip: you can modify some code before running
