纵向导航菜单.doc

第一段 父级菜单1 首页网页版式布局div+css教程div+css实例常用代码站长杂谈技术文档资源下载图片素材 2 #menu ul list-style: none; margin: 0px; padding: 0px; 3 body font-family: Verdana; font-size: 12px; line-height: 1.5; 4 #menu width: 100px; border: 1px solid #CCC; 5 #menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; 6 选择字体，在“链接栏”输入“#”： 7 a color: #000; text-decoration: none; 8 当鼠标划过链接文字时，让文字颜色变成红色a:hover color: #F00; 此段所有代码：body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; #menu width: 100px; border: 1px solid #CCC; #menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; 首页网页版式布局div+css教程div+css实例常用代码站长杂谈技术文档资源下载图片素材第二段 纵向二级列表1 首页网页版式布局自适应宽度固定宽度div+css教程新手入门视频教程常见问题div+css实例常用代码站长杂谈技术文档资源下载图片素材 2 增加一个 position:relative;#menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; 3 定位#menu ul li ul display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc;border-bottom:none; 4 #menu ul li:hover ul 它的意思是定义ID为menu下ul下li，当鼠标划过时ul的样式，这里设置为display:block，指的是鼠标划过时显示这块内容#menu ul li:hover ul display:block;5 加上JS!-startList = function() if (document.all&document.getElementById) navRoot = document.getElementById(menu);var allli = navRoot.getElementsByTagName(li)for (i=0; i和样式：#menu ul li.current ul display:block;此段所有代码：!-startList = function() if (document.all&document.getElementById) navRoot = document.getElementById(menu);var allli = navRoot.getElementsByTagName(li)for (i=0; ibody font-family: Verdana; font-size: 12px; line-height: 1.5; img border-style: none; a color: #000; text-decoration: none; a:hover color: #F00; #menu width: 100px; border: 1px solid #CCC; border-bottom:none;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; #menu ul li ul display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; #menu ul li.current ul