Tip: you can modify some code before running
Classic pure css menu code [supports ie6 and ie7]<style type="text/css"># Pad {height: 130px;} # dropline {padding: 0; margin: 0 auto 0 auto; list-style: none; height: 40px; position: relative; width: 532px; float: left;} # dropline table {border-collapse: width: 0; height: 0; margin:-1px-10px;} # dropline li {float: left ;} # dropline li a B {display: block; height: 45px; line-height: 34px; width: 76px; float: left; color: #000; text-decoration: none; font-family: arial, sans-serif; font-size: 11px; background: url (/blog/upload/image/200912225202.png); text-align: center ;} * html # dropline li a B {background: none; filter: progid: DXImageTransform. microsoft. alphaImageLoader (src = '/blog/upload/image/20091212225202.png', sizingMethod = 'scal'); cursor: pointer;} # dropline li a: hover B {background: url (/blog/upload/image/200912225241.png); color: # fff; white-space: nowrap; cursor: pointer;} * html # dropline li a: hover B {background: none; filter: progid: DXImageTransform. microsoft. alphaImageLoader (src = '/blog/upload/image/20091212225241.png', sizingMethod = 'scal'); cursor: pointer;} # dropline li: hover> a B {background: url (/blog/upload/image/200912225241.png); color: # fff ;}# dropline ul {padding: 0; margin: 0; list-style: none; position: absolute; height: 25px; width: 532px; left:-9999px; top:-25px; z-index: 10 ;}# dropline ul li {height: 25px; line-height: 25px ;}# dropline ul li a {color: # aaa; padding: 0 10px 0 10px; height: 25px; line-height: 25px; border-right: 1px solid # aaa; font-weight: bold; font-size: 11px; white-space: nowrap; font-family: arial, sans-serif; font-size: 11px; text-decoration: none;} # dropline ul li. last {border: none ;}# dropline ul li a: hover {height: 25px; line-height: 25px; color: # fff ;}# dropline: hover ul {left: 0; background: url(trans.gif)} # dropline li. current a B {background: url(select.png); line-height: 34px; color: # fff;} * html # dropline li. current a B {background: none; filter: progid: dximagetransform.microsoft.alphaimageloader(src1_'select.png ', sizingMethod = 'scal'); cursor: pointer;} # dropline li. current ul li a {color: # aaa; padding: 0 10px 0 10px; height: 25px; line-height: 25px; border-right: 1px solid # aaa; font-weight: bold; font-size: 11px; white-space: nowrap; background: transparent;} # dropline li. current ul li. last {border: none;} # dropline li. current ul li a: hover {height: 25px; line-height: 25px; color: # fff ;}</style><div id="outer"><div id="menuHolder"><ul id="dropline"><li class="first"><b>Home</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul class="blank"><li></li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Single Level</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul class="blank"><li></li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropdown</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul><li>Dropdown One</li><li>Dropdown Two</li><li>Dropdown Three</li><li>Dropdown Four</li><li>Dropdown Five</li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li class="current"><b>Dropline</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul><li>Dropline One</li><li class="current_sub">Dropline Two</li><li>Dropline Three</li><li>Dropline Four</li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Flyout</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul class="right"><li>Flyout One</li><li>Flyout Two</li><li>Flyout Three</li><li>Flyout Four</li><li>Flyout Five</li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Support</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul class="blank"><li></li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li><li class="last"><b>Contact</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><div><ul class="blank"><li></li></ul></div><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul></div></div>
Tip: you can modify some code before running
