提示：您可以先修改部分代碼再運行
Css+div 超簡潔導航上伸菜單代碼<ul id="menu"><li><b>Home</b></li><li><b>Single Level</b></li><li class="current"><b>Dropdown</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub1"><li>Dropdown one<!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="fly1"><li>Dropdown 1.1</li><li>Dropdown 1.2</li><li>Dropdown 1.3</li><li>Dropdown 1.4</li><li>Dropdown 1.5</li><li>Dropdown 1.6</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li class="currentsub">Dropdown two<!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="fly2"><li>Dropdown 2.1</li><li>Dropdown 2.2</li><li class="currentfly">Dropdown 2.3</li><li>Dropdown 2.4</li><li>Dropdown 2.5</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li>Dropdown three</li><li>Dropdown four</li><li>Dropdown five<!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="fly3"><li>Dropdown 5.1</li><li>Dropdown 2.2</li><li>Dropdown 3.3</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropline</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub2"><li>Dropline one</li><li>Dropline two</li><li>Dropline three</li><li>Dropline four</li><li>Dropline five</li><li>Dropline six</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="sub3"><li>Flyout one</li><li>Flyout two</li><li>Flyout three</li><li>Flyout four</li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li id="support"><b>Support</b></li><li id="contact"><b>Contact</b></li></ul><style>#pad {height:155px;}#menu {padding:0 0 0 30px; margin:0; list-style:none; height:25px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}#menu li {float:left; margin-right:1px;}#menu li a {display:block; float:left; height:25px; line-height:25px; background:#333; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}/* Default link styling *//* Style the list OR link hover. Depends on which browser is used */#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#0c6;}#menu li:hover {position:relative; z-index:200;}#menu li:hover > a {color:#fff; background:#0c6;}#menu li:hover > a.sub {color:#fff; background-color:#0c6;}#menu li.current a {color:#fff; background:#084;}#menu li a.sub {background: #333 url(yun_qi_img/20091216074058.gif) no-repeat right center;}#menu li.current a.sub {color:#fff; background:#084 url(yun_qi_img/20091216074058.gif) no-repeat right center;;}#menu li:hover ul {left:0; top:auto; bottom:25px; width:120px; background:#444;}#menu a:hover ul {left:0; top:auto; bottom:0; width:120px; background:#444;}/* keep the 'next' level invisible by placing it off screen. */#menu ul, #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:auto; margin:0; padding:0; list-style:none;}#menu :hover ul :hover ul{left:120px; top:auto; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}#menu :hover ul :hover ul.fly3 {bottom:auto; top:-53px;}#menu :hover ul :hover ul.fly2 {bottom:auto; top:-27px;}#menu :hover ul :hover ul.fly1 {bottom:auto; top:-27px;}#menu :hover ul li {margin:0; border-top:1px solid #666;}#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:25px; line-height:25px;}#menu :hover ul li a.fly {background:#333 url(yun_qi_img/20091216074031.gif) no-repeat right center;}#menu :hover ul :hover {background-color:#0c6; color:#fff;}#menu :hover ul :hover a.fly {background-color:#0c6; color:#fff;}#menu :hover ul li.currentsub a {background:#084; color:#fff;}#menu :hover ul li.currentsub a.fly {background:#084 url(yun_qi_img/20091216074031.gif) no-repeat right center; color:#fff;}#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}#menu :hover ul :hover ul :hover {background-color:#0d7; color:#fff;}#menu :hover ul :hover ul li.currentfly a,#menu :hover ul :hover ul li.currentfly a:hover {background:#084; color:#fff;}</style>
提示：您可以先修改部分代碼再運行
