纯CSS实现,简单、方便,缺点是扩展性不够好,增加一层菜单时有点麻烦。 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > CSS多级下拉菜单 </ title > < style > ... .menu {...}{ text-align:left; color:#FFF; font-family:幼圆; /**//*菜单字体*/ height:26px; width:100%}.menu ul.menuBar{...}{ list-style:none; margin:0px; font-size:12pt; /**//*一级菜单字体大小*/}.menu ul.menuBar li{...}{ float:left; display:block; position:relative; /**//*关键*/ margin-right:2px; /**//*一级菜单间距*/} .menu ul.menuBar li a.menuLink{...}{/**//*一级菜单正常样式*/ display:block; width:125px; height:26px; color:#FFF; text-decoration:none; background-color:#90BA18; text-align:center; line-height:26px;}.menu ul.menuBar li:hover a.menuLink{...}{ /**//*鼠标移到一级菜单时的样式*/ background-color:#B2DE31; color:#000;}.menu ul.menuBar li ul,/**//*隐藏二级菜单*/.menu ul.menuBar li:hover ul.subMenu3,/**//*隐藏三级菜单*/.menu ul.menuBar li:hover ul li:hover ul.subMenu4 {...}{ /**//*隐藏四级菜单*/ margin:0; display:none;}.menu ul.menuBar li ul li a.m2Link, /**//*二级菜单正常样式*/.menu ul.menuBar li ul li:hover ul li a.m3Link, /**//*三级菜单正常样式*/.menu ul.menuBar li ul li ul li:hover ul li a.m4Link{...}{ /**//*四级菜单正常样式*/ text-decoration:none; color:#000; display:block; text-align:center; width:124px; background-color:#EBFEAC; margin-top:1px; /**//*子菜单行间距*/}.menu ul.menuBar li ul li:hover a.m2Link,/**//*鼠标移到二级菜单时的样式*/.menu ul.menuBar li ul li ul li:hover a.m3Link,/**//*鼠标移到三级菜单时的样式*/.menu ul.menuBar li ul li ul li ul li:hover a.m4Link{...}{/**//*鼠标移到四级菜单时的样式*/ background-color:#D3F666; color:#000;}.menu ul.menuBar li:hover ul{...}{ /**//*显示二级菜单*/ position:absolute; display:block; width:124px; font-size:11pt; /**//*二级及其下级菜单字体大小*/ background-color:#FFF; /**//*菜单行间显示的颜色*/ left:1px;}.menu ul.menuBar li ul li:hover ul.subMenu3,/**//*显示三级菜单*/.menu ul.menuBar li ul li:hover ul li:hover ul.subMenu4{...}{ /**//*显示四级菜单*/ padding-left:1px; /**//*每级菜单的间距*/ display:block; position:absolute; /**//*相对父菜单定位*/ left:124px; /**//*该数值根据菜单宽度设置*/ top:0px;} </ style > </ head > < body > < div class ="menu" > < ul class ="menuBar" > < li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li > < ul > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li > < a href ="#" class ="m2Link" > 测试菜单> </ a > < ul class ="subMenu3" > < li > < a href ="#" class ="m3Link" > 子菜单3> </ a > < ul class ="subMenu4" > < li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li > < li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li > < li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li > < li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li > < li >< a href ="#" class ="m4Link" > 子菜单4 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li > < ul > < li > < a href ="#" class ="m2Link" > 测试菜单> </ a > < ul class ="subMenu3" > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > < li >< a href ="#" class ="m3Link" > 子菜单3 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li > < ul > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > </ ul > </ li > < li >< a href ="#" class ="menuLink" > 测试菜单 </ a ></ li > < ul > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > < li >< a href ="#" class ="m2Link" > 测试菜单 </ a ></ li > </ ul > </ li > </ ul > </ div > </ body > </ html >