本文实例讲述了js+css实现导航效果的方法。分享给大家供大家参考。具体实现方法如下： 1. 程序代码如下： 复制代码 代码如下: CSS+JS实现兼容性很好的无限级下拉菜单 <br /> *{ margin:0; padding:0; border:0;} <br /> body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;} <br /> .clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;} <br /> a:link{ color:#000; text-decoration:none; } <br /> a:visited{ color:#000; text-decoration:none; } <br /> a:hover{ color:#000; text-decoration:none; } <br /> .menu{ width:778px; height:26px; background:#fff; margin:0 auto;} <br /> .menusel{ float:left;width:100px; position:relative; height:25px; background:#ddd; line-height: 25px; margin-left: 1px; *margin-left: 0px;_margin-left: -1px;} <br /> .menusel h2{ font-size:12px; } <br /> .menusel a{ display: block;text-align:center; width:100px;border:1px solid #a4a4a4; height:25px; border-bottom:1px solid #a4a4a4; position:relative; z-index:2;} <br /> .menusel a:hover{ border:1px solid #a4a4a4; border-bottom:1px dashed #eeeeee; position:relative; z-index:2; height:25px;} <br /> .ahover a{border-bottom:1px dashed #eeeeee; background:#eeeeee; } <br /> .position{ position:absolute; z-index:1;} <br /> .menusel ul{width:125px; background:#eee; border:1px solid #a4a4a4; margin-top: -1px; position:relative; z-index:1; display:none;} <br /> .menusel .block{ display:block;} <br /> .typeul li{border-bottom:1px dashed #a4a4a4;width:125px; position:relative; float:left; } <br /> .typeul li a{ border:none;width:125px; } <br /> .typeul li a:hover{ border:none; background:#ddd;} <br /> .typeul{ margin-left:0; } <br /> .typeul ul{left:125px; top:0; position:absolute;} <br /> .fli{ margin-left: -1px; border-left:#eeeeee solid 1px;} <br /> .menusel .lli{ border:none; } <br /> document.execCommand("BackgroundImageCache", false, true); 菜单1 菜单选项1-2 菜单选项1-2 菜单选项1-2-1 菜单选项1-2-2 菜单选项1-2 菜单选项1-2 菜单2 菜单选项2-2 菜单选项2-2 菜单选项2-2-1 菜单选项2-2-2 菜单选项2-2-1 菜单选项2-2-2 菜单选项2-2 菜单选项2-2 菜单3 菜单选项3-2 菜单选项3-2 菜单选项3-2-1 菜单选项3-2-2 菜单选项3-2-1 菜单选项3-2-2 菜单选项3-2-1 菜单选项3-2-2 菜单选项3-2 菜单选项3-2 <br /> for(var x = 1; x < 4; x++) <br /> { <br /> var menuid = document.getElementById("menu"+x); <br /> menuid.num = x; <br /> type(); <br /> } <br /> function type() <br /> { <br /> var menuh2 = menuid.getElementsByTagName("h2"); <br /> var menuul = menuid.getElementsByTagName("ul"); <br /> var menuli = menuul[0].getElementsByTagName("li"); <br /> menuh2[0].onmouseover = show; <br /> menuh2[0].onmouseout = unshow; <br /> menuul[0].onmouseover = show; <br /> menuul[0].onmouseout = unshow; <br /> function show() <br /> { <br /> menuul[0].className = "clearfix typeul block" <br /> } <br /> function unshow() <br /> { <br /> menuul[0].className = "typeul" <br /> } <br /> for(var i = 0; i < menuli.length; i++) <br /> { <br /> menuli[i].num = i; <br /> var liul = menuli[i].getElementsByTagName("ul")[0]; <br /> if(liul) <br /> { <br /> typeshow() <br /> } <br /> } <br /> function typeshow() <br /> { <br /> menuli[i].onmouseover = showul; <br /> menuli[i].onmouseout = unshowul; <br /> } <br /> function showul() <br /> { <br /> menuli[this.num].getElementsByTagName("ul")[0].className = "block"; <br /> } <br /> function unshowul() <br /> { <br /> menuli[this.num].getElementsByTagName("ul")[0].className = ""; <br /> } <br /> } <br /> 2. 程序效果 希望本文所述对大家的javascript程序设计有所帮助。
