DIV教程之用css制造的导航菜单[修改版]
增加了开发风险，一个css文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。[*]
[*]
之前发过一个演示，下拉及多级弹出式菜单仅供进修之用，实践使用中还存在些成绩，被会员kl521516发明当下拉菜单下有内容时会把内容挤跑，小A改成了相对定位的体例，固然能够办理挤跑的成绩，但在IE6下新的成绩又呈现了，就是下拉菜单下边的选不中，自己对JS不太熟习，明天又找了个没成绩的，上传下面供人人分享。
<!DOCTYPEhtmlPUBliC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>css菜单演示</title><styletype="text/css"><!--*{margin:0;padding:0;border:0;}body{font-family:arial,宋体,serif;font-size:12px;}#nav{line-height:24px;list-style-type:none;background:#666;}#nava{display:block;width:80px;text-align:center;}#nava:link{color:#666;text-decoration:none;}#nava:visited{color:#666;text-decoration:none;}#nava:hover{color:#FFF;text-decoration:none;font-weight:bold;}#navli{float:left;width:80px;background:#CCC;}#navlia:hover{background:#999;}#navliul{line-height:27px;list-style-type:none;text-align:left;left:-999em;width:180px;position:absolute;}#navliulli{float:left;width:180px;background:#F6F6F6;}#navliula{display:block;width:180px;width:156px;text-align:left;padding-left:24px;}#navliula:link{color:#666;text-decoration:none;}#navliula:visited{color:#666;text-decoration:none;}#navliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}#navli:hoverul{left:auto;}#navli.sfhoverul{left:auto;}#content{clear:left;}--></style><scripttype=text/javascript><!--//--><!.onmou搜索引擎优化ver=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onMouseDown=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onMouseUp=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}sfEls.onmou搜索引擎优化ut=function(){this.className=this.className.replace(newRegExp("(?|^)sfhover"),"");}}}window.onload=menuFix;//--><!]]></script></head><body><ulid="nav"><li><ahref="#">产物先容</a><ul><li><ahref="#">产物一</a></li><li><ahref="#">产物一</a></li><li><ahref="#">产物一</a></li><li><ahref="#">产物一</a></li><li><ahref="#">产物一</a></li><li><ahref="#">产物一</a></li></ul></li><li><ahref="#">服务先容</a><ul><li><ahref="#">服务二</a></li><li><ahref="#">服务二</a></li><li><ahref="#">服务二</a></li><li><ahref="#">服务二服务二</a></li><li><ahref="#">服务二服务二服务二</a></li><li><ahref="#">服务二</a></li></ul></li><li><ahref="#">乐成案例</a><ul><li><ahref="#">案例三</a></li><li><ahref="#">案例</a></li><li><ahref="#">案例三案例三</a></li><li><ahref="#">案例三案例三案例三</a></li></ul></li><li><ahref="#">关于我们</a><ul><li><ahref="#">我们四</a></li><li><ahref="#">我们四</a></li><li><ahref="#">我们四</a></li><li><ahref="#">我们四111</a></li></ul></li><li><ahref="#">在线演示</a><ul><li><ahref="#">演示</a></li><li><ahref="#">演示</a></li><li><ahref="#">演示</a></li><li><ahref="#">演示演示演示</a></li><li><ahref="#">演示演示演示</a></li><li><ahref="#">演示演示</a></li><li><ahref="#">演示演示演示</a></li><li><ahref="#">演示演示演示演示演示</a></li></ul></li><li><ahref="#">接洽我们</a><ul><li><ahref="#">接洽接洽接洽接洽接洽</a></li><li><ahref="#">接洽接洽接洽</a></li><li><ahref="#">接洽</a></li><li><ahref="#">接洽接洽</a></li><li><ahref="#">接洽接洽</a></li><li><ahref="#">接洽接洽接洽</a></li><li><ahref="#">接洽接洽接洽</a></li></ul></li></ul><divstyle="clear:both;">看看这一行内容会不会被挤跑－－www.ckuyun.com</div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道，实在是太过于麻烦。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
页:
[1]