效果演示： 实例代码： 复制代码 代码如下: demo <BR><!-- <BR>body { <BR>font-family: Arial, Helvetica, sans-serif; <BR>font-size: 11px; <BR>} <BR>#nav, #nav ul { <BR>list-style: none; <BR>background: #F9F9F9; <BR>font-weight: bold; <BR>padding: 0px; <BR>margin: 0px; <BR>border: solid 1px #CCCCCC; <BR>border-bottom: 0px; <BR>width: 150px; <BR>text-align: left; <BR>} <BR>#nav ul ul{ <BR>border: solid 1px #CCCCCC; <BR>border-bottom: 0px; <BR>} <BR>#nav a { <BR>display: block; <BR>width: 150px; <BR>w\idth: 140px; <BR>color: #333333; <BR>text-decoration: none; <BR>text-align: center; <BR>border-bottom: solid 1px #CCCCCC; <BR>text-align: left; <BR>padding-left: 10px; <BR>} <BR>#nav a:hover{ <BR>color: #336666; <BR>} <BR>#nav a.selected{ <BR>background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%; <BR>} <BR>#nav li { <BR>line-height: 22px; <BR>position: relative; <BR>} <BR>#nav li ul { <BR>position: absolute; <BR>left: -999em; <BR>width: 150px; <BR>font-weight: normal; <BR>margin: 0px; <BR>padding: 0px; <BR>} <BR>#nav li li { <BR>width: 150px; <BR>} <BR>#nav li ul a { <BR>width: 150px; <BR>w\idth: 126px; <BR>padding: 0px 12px; <BR>line-height: 22px; <BR>text-align: left; <BR>} <BR>#nav li ul ul { <BR>margin: 0px 0 0 150px; <BR>} <BR>#nav li:hover ul ul,#nav li.sfhover ul ul{ <BR>left: -999em; <BR>} <BR>#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ <BR>left: auto; <BR>} <BR>#nav li:hover ul,#nav li.sfhover ul{ <BR>left: 150px; <BR>top: 0px; <BR>} <BR>#nav li:hover, #nav li.sfhover { <BR>background: #F5E3C0; <BR>} <BR>* html #nav li { <BR>float: left; <BR>height: 1%; <BR>} <BR>* html #nav li a { <BR>height: 1%; <BR>} <BR>--> <BR> Back Home About Me Tutorials Sub Menu 31 Sub Menu 32 Sub Menu 321 Sub Menu 322 Sub Menu 323 Sub Menu 324 Sub Menu 33 Sub Menu 34 Gallery Sub Menu 41 Sub Menu 42 Sub Menu 421 Sub Menu 422 Sub Menu 423 Sub Menu 424 Sub Menu 43 Sub Menu 44 Contact Me
