css左側多級菜單

提示：您可以先修改部分代碼再運行

<ul id="flyout"><li id="home"><b>Home</b></li><li id="single"><b>Single Level</b></li><li><b>Dropdown</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown One</b></li><li><b>Dropdown Two</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 2.1</b></li><li><b>Dropdown 2.2</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 2.2.1</b></li><li><b>Dropdown 2.2.2</b></li><li><b>Dropdown 2.2.3</b></li><li><b>Dropdown 2.2.4</b></li><li><b>Dropdown 2.2.5</b></li><li><b>Dropdown 2.2.6</b></li><li><b>Dropdown 2.2.7</b></li><li class="last"><b>Dropdown 2.2.8</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li class="last"><b>Dropdown 2.3</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 2.3.1</b></li><li><b>Dropdown 2.3.2</b></li><li><b>Dropdown 2.3.3</b></li><li class="last"><b>Dropdown 2.3.4</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropdown Three</b></li><li><b>Dropdown Four</b></li><li><b>Dropdown Five</b></li><li><b>Dropdown Six</b></li><li><b>Dropdown Seven</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 7.1</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 7.1.1</b></li><li><b>Dropdown 7.1.2</b></li><li><b>Dropdown 7.1.3</b></li><li><b>Dropdown 7.1.4</b></li><li><b>Dropdown 7.1.5</b></li><li class="last"><b>Dropdown 7.1.6</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropdown 7.2</b></li><li><b>Dropdown 7.3</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropdown 7.3.1</b></li><li><b>Dropdown 7.3.2</b></li><li><b>Dropdown 7.3.3</b></li><li class="last"><b>Dropdown 7.3.4</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropdown 7.4</b></li><li class="last"><b>Dropdown 7.5</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropdown Eight</b></li><li class="last"><b>Dropdown Nine</b></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><li><b>Dropline One</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropline 1.1</b></li><li class="last"><b>Dropline 1.2</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropline 1.2.1</b></li><li><b>Dropline 1.2.2</b></li><li><b>Dropline 1.2.3</b></li><li class="last"><b>Dropline 1.2.4</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropline Two</b></li><li><b>Dropline Three</b></li><li class="last"><b>Dropline Four</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropline 4.1</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropline 4.1.1</b></li><li><b>Dropline 4.1.2</b></li><li class="last"><b>Dropline 4.1.3</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Dropline 4.2</b></li><li><b>Dropline 4.3</b></li><li class="last"><b>Dropline 4.4</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Dropline 4.4.1</b></li><li><b>Dropline 4.4.2</b></li><li><b>Dropline 4.4.3</b></li><li><b>Dropline 4.4.4</b></li><li><b>Dropline 4.4.5</b></li><li class="last"><b>Dropline 4.4.6</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></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><li><b>Flyout One</b></li><li><b>Flyout Two</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Flyout 2.1</b></li><li class="last"><b>Flyout 2.2</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Flyout 2.2.1</b></li><li><b>Flyout 2.2.2</b></li><li><b>Flyout 2.2.3</b></li><li class="last"><b>Flyout 2.2.4</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Flyout Three</b></li><li><b>Flyout Four</b></li><li><b>Flyout Five</b></li><li><b>Flyout Six</b></li><li><b>Flyout Seven</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Flyout 7.1</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Flyout 7.1.1</b></li><li><b>Flyout 7.1.2</b></li><li class="last"><b>Flyout 7.1.3</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Flyout 7.2</b></li><li class="last"><b>Flyout 7.3</b><!--[if gte IE 7]><!--><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul><li><b>Flyout 7.3.1</b></li><li><b>Flyout 7.3.2</b></li><li><b>Flyout 7.3.3</b></li><li><b>Flyout 7.3.4</b></li><li class="last"><b>Flyout 7.3.5</b></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li></ul><!--[if lte IE 6]></td></tr></table><![endif]--></li><li><b>Flyout Eight</b></li><li class="last"><b>Flyout Nine</b></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>#flyout {float:left; padding:0; margin:2px 0 0 0; list-style:none; width:140px; border-top:1px solid #fff;}#flyout ul {padding:0; margin:0; list-style:none; position:absolute; left:-9999px;}#flyout table {border-collapse:collapse; margin:-1px -10px;}#flyout li {float:left;width:140px; height:24px; border-bottom:1px solid #fff;}#flyout li#contact {margin:0;}#flyout li a {display:block; width:109px; height:24px; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:23px; text-decoration:none; padding-left:30px; border-left:1px solid #fff;}#flyout li#home a {background:#888 url(yun_qi_img/20091214111023.gif) no-repeat 5px center;}#flyout li#single a {background:#888 url(yun_qi_img/20091214110932.gif) no-repeat 5px center;}#flyout li a.fly {background:#888 url(yun_qi_img/20091214110958.gif) no-repeat 5px center;}#flyout li a.fly b {display:block; width:109px; height:24px; background:url(yun_qi_img/20091214110831.gif) no-repeat right center; cursor:pointer;}#flyout li#support a {background:#888 url(yun_qi_img/20091214111105.gif) no-repeat 5px center;}#flyout li#contact a {background:#888 url(yun_qi_img/20091214110859.gif) no-repeat 5px center;}#flyout li:hover {position:relative;}#flyout li a:hover {white-space:nowrap; color:#a7defc; position:relative;}#flyout li:hover > a {color:#a7defc;}#flyout li a.fly:hover {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout li:hover > a.fly {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout :hover ul {left:120px; top:-1px; width:150px; height:auto; border-top:1px solid #fff;}#flyout :hover ul li {width:150px;}#flyout :hover ul ul {left:-9999px;}#flyout :hover ul :hover ul {left:130px; top:-1px;}#flyout :hover ul li a {background:#888 url(yun_qi_img/20091214110932.gif) no-repeat 5px center; width:119px;}#flyout :hover ul li a b {width:119px; background:none;}#flyout :hover ul li a.fly {background:#888 url(yun_qi_img/20091214110958.gif) no-repeat 5px center;}#flyout :hover ul li a.fly b {background:url(yun_qi_img/20091214110831.gif) no-repeat right center;}#flyout :hover ul li a:hover.fly {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout :hover ul :hover > a.fly {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout :hover ul :hover ul ul {left:-9999px;}#flyout :hover ul :hover ul li a {background:#888 url(yun_qi_img/20091214110932.gif) no-repeat 5px center; width:119px;}#flyout :hover ul :hover ul li a b {width:119px; background:none;}#flyout :hover ul :hover ul li a.fly {background:#888 url(yun_qi_img/20091214110958.gif) no-repeat 5px center;}#flyout :hover ul :hover ul li a.fly b {background:url(yun_qi_img/20091214110831.gif) no-repeat right center;}#flyout :hover ul :hover ul li a:hover.fly {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout :hover ul :hover ul li:hover > a.fly {background:#888 url(yun_qi_img/20091214111043.gif) no-repeat 5px center;}#flyout :hover ul :hover ul :hover ul {left:130px; top:-1px;}#flyout :hover ul :hover ul :hover ul li a {background:#888 url(yun_qi_img/20091214110932.gif) no-repeat 5px center; width:119px;}#flyout :hover ul :hover ul :hover ul li a b {width:119px; background:none;}</style>

提示：您可以先修改部分代碼再運行