今天来学习CSS+JS完成兼容性很好的无穷级下拉菜单
说实话，我并不是反对div+css，但物生一利，必生一弊，div+css的利处大家说了很多，我就说说狂热的追求div+css的几个弊端：[*]
[*]
再发一个关于多级下拉菜单的实例，在IE8下测试没成绩，其他没测，请测试后决意是不是利用。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head><title>CSS+JS完成兼容性很好的无穷级下拉菜单</title><styletype="text/css">*{margin:0;padding:0;border:0;}body{font:12px/130%verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}a:link{color:#000;text-decoration:none;}a:visited{color:#000;text-decoration:none;}a:hover{color:#000;text-decoration:none;}.menu{width:778px;height:26px;background:#fff;margin:0auto;}.menusel{float:left;width:100px;position:relative;height:25px;background:#ddd;line-height:25px;margin-left:1px;*margin-left:0px;_margin-left:-1px;}.menuselh2{font-size:12px;}.menusela{display:block;text-align:center;width:100px;border:1pxsolid#a4a4a4;height:25px;border-bottom:1pxsolid#a4a4a4;position:relative;z-index:2;}.menusela:hover{border:1pxsolid#a4a4a4;border-bottom:1pxdashed#eeeeee;position:relative;z-index:2;height:25px;}.ahovera{border-bottom:1pxdashed#eeeeee;background:#eeeeee;}.position{position:absolute;z-index:1;}.menuselul{width:125px;background:#eee;border:1pxsolid#a4a4a4;margin-top:-1px;position:relative;z-index:1;display:none;}.menusel.block{display:block;}.typeulli{border-bottom:1pxdashed#a4a4a4;width:125px;position:relative;float:left;}.typeullia{border:none;width:125px;}.typeullia:hover{border:none;background:#ddd;}.typeul{margin-left:0;}.typeulul{left:125px;top:0;position:absolute;}.fli{margin-left:-1px;border-left:#eeeeeesolid1px;}.menusel.lli{border:none;}</style><scripttype="text/javascript">document.execCommand("BackgroundImageCache",false,true);</script><!--IE6背景图片闪灼成绩--></head><body><divclass="menu"><divid="menu1"class="menusel"><h2><ahref="/">菜单1</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="http://www.33567.cn">菜单选项1-2</a></li><li><ahref="#">菜单选项1-2</a><ul><liclass="fli"><ahref="#">菜单选项1-2-1</a></li><liclass="lli"><ahref="#">菜单选项1-2-2</a></li></ul></li><li><ahref="http://www.7caidy.com">菜单选项1-2</a></li><liclass="lli"><ahref="#">菜单选项1-2</a></li></ul></div><!--position--></div><!--menusel--><divid="menu2"class="menusel"><h2><ahref="#">菜单2</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="#">菜单选项2-2</a></li><li><ahref="#">菜单选项2-2</a><ul><liclass="fli"><ahref="#">菜单选项2-2-1</a></li><liclass="lli"><ahref="#">菜单选项2-2-2</a><ul><liclass="fli"><ahref="#">菜单选项2-2-1</a></li><liclass="lli"><ahref="#">菜单选项2-2-2</a></li></ul></li></ul></li><li><ahref="#">菜单选项2-2</a></li><liclass="lli"><ahref="#">菜单选项2-2</a></li></ul></div><!--position--></div><!--menusel--><divid="menu3"class="menusel"><h2><ahref="#">菜单3</a></h2><divclass="position"><ulclass="clearfixtypeul"><li><ahref="#">菜单选项3-2</a></li><li><ahref="#">菜单选项3-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a><ul><liclass="fli"><ahref="#">菜单选项3-2-1</a></li><liclass="lli"><ahref="#">菜单选项3-2-2</a></li></ul></li></ul></li></ul></li><li><ahref="#">菜单选项3-2</a></li><liclass="lli"><ahref="#">菜单选项3-2</a></li></ul></div><!--position--></div><!--menusel--></div><!--menu--><scripttype="text/javascript">for(varx=1;x<4;x++){varmenuid=document.getElementById("menu"+x);menuid.num=x;type();}functiontype(){varmenuh2=menuid.getElementsByTagName("h2");varmenuul=menuid.getElementsByTagName("ul");varmenuli=menuul.getElementsByTagName("li");menuh2.onmou搜索引擎优化ver=show;menuh2.onmou搜索引擎优化ut=unshow;menuul.onmou搜索引擎优化ver=show;menuul.onmou搜索引擎优化ut=unshow;functionshow(){menuul.className="clearfixtypeulblock"}functionunshow(){menuul.className="typeul"}for(vari=0;i<menuli.length;i++){menuli.num=i;varliul=menuli.getElementsByTagName("ul");if(liul){typeshow()}}functiontypeshow(){menuli.onmou搜索引擎优化ver=showul;menuli.onmou搜索引擎优化ut=unshowul;}functionshowul(){menuli.getElementsByTagName("ul").className="block";}functionunshowul(){menuli.getElementsByTagName("ul").className="";}}</script></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
大大增加了开发时间，同时也增加了开发成本。当然如果你是一个熟手，或者可以白天黑夜都加班而不用担心没有加班费，那可能不会。
今天来学习CSS+JS完成兼容性很好的无穷级下拉菜单
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 学Dreamweaver技术的过程其实是一个增加信心的过程。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
页:
[1]