Tip: you can modify some code before running
Pure CSS + Div classic navigation menu<ul id="dropline"><li><b>Home</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="blank"><li></li></ul><!--[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]--><ul class="blank"><li></li></ul><!--[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]--><ul><li>Dropdown One</li><li>Dropdown Two</li><li>Dropdown Three</li><li>Dropdown Four</li><li>Dropdown Five</li></ul><!--[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]--><ul><li>Dropline One</li><li class="current_sub">Dropline Two</li><li>Dropline Three</li><li>Dropline Four</li></ul><!--[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]--><ul class="right"><li>Flyout One</li><li>Flyout Two</li><li>Flyout Three</li><li>Flyout Four</li><li>Flyout Five</li></ul><!--[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]--><ul class="blank"><li></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Contact</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="blank"><li></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><style>#pad {height:140px;}#dropline {padding:0 0 0 30px; margin:0 0 0 300px; list-style:none; height:40px; background:url(yun_qi_img/20091215072440.gif) repeat-x; position:relative;}#dropline table {border-collapse:collapse: width:0; height:0; margin:-3px -10px;}#dropline li {float:left;}#dropline li a {display:block; height:40px; line-height:40px; padding:0 20px 0 0; float:left; color:#fff; text-decoration:none; font-family:tahoma, sans-serif; font-size:12px;}#dropline li a b {display:block; height:40px; float:left; padding:0 0 0 20px; cursor:pointer;}#dropline li a:hover {background:url(yun_qi_img/20091215072354.gif) no-repeat right top; line-height:36px; height:44px}#dropline li a:hover b {background:url(yun_qi_img/20091215072420.gif) no-repeat left top; line-height:36px;}#dropline li:hover > a {background:url(yun_qi_img/20091215072354.gif) no-repeat right top; line-height:36px; height:44px}#dropline li:hover > a b {background:url(yun_qi_img/20091215072420.gif) no-repeat left top; line-height:36px;}#dropline ul {padding:0; margin:0; list-style:none; position:absolute; height:25px; width:700px; background:#f8f8f8; left:-9999px; top:44px; z-index:10; border-bottom:1px solid #fff;}#dropline ul li {height:25px; line-height:25px;}#dropline ul.right li {float:right;}#dropline ul li a {color:#000; padding:0 10px 0 10px; height:25px; line-height:25px; border-right:1px solid #e60; font-weight:bold; font-size:11px;}#dropline ul li a:hover {height:25px; line-height:25px; background:transparent; color:#c60;}#dropline ul.right li a {border-left:1px solid #e60; border-right:0;}#dropline ul li a.last {border:0;}#dropline :hover ul {left:0;}#dropline li.current ul {left:0; z-index:1;}#dropline li.current a {background:url(yun_qi_img/20091215072354.gif) no-repeat right top; line-height:36px; height:44px}#dropline li.current a b {background:url(yun_qi_img/20091215072420.gif) no-repeat left top; line-height:36px;}#dropline li.current ul li a {color:#000; padding:0 10px 0 10px; height:25px; line-height:25px; background:transparent;}#dropline li.current ul li.current_sub a {color:#c60;}#dropline li.current ul li a:hover {color:#c60;}</style>
Tip: you can modify some code before running
