六步解析实现css二级菜单.doc

基本功能实现图：开始之前：Html body内 关于导航菜单的基本格式 aaaa /内部镶嵌的ul标签 /二级菜单列表 1111 2222 3333 bbbb /内部镶嵌的ul标签 /二级菜单列表 1111 2222 3333 /重复部分 开始编辑 css 二级导航菜单部分的代码：第一步： 此div标签内部所有 ul 标签样式设置，主要如下 #ass ,#ass ul padding: 0; /内边炬设置为0margin: 0; /外边炬设置为0list-style: none; /无列表样式第二步：此div标签内部所有 li 标签样式设置，主要如下 #ass li float: left; /左边浮动，实现水平菜单栏，如需竖直菜单栏则设置浮动为none position: relative; /规定元素定位类型，相对的 margin-right: 1em; /右外边距 导航栏的1% + . /此处加其他美化修饰语言第三步：此div标签内部所有a:link、a:visited、a:hover样式设置，主要如下： #ass a:link, #nav a:visited display: block; /规定生成框类型，成块呈现 padding-left: 1em; /左内边距，1% +. /此处加其他美化修饰语言 #ass a:hover Background-color:red; /鼠标悬停改变背景颜色第四步：内部镶嵌的ul标签的隐藏，主要如下： #nav ul display: none; /规定生成框类型，无 position: absolute; /规定元素定位类型： 绝对 padding-top: 0.5em;/顶部内边距， 0.5%第五步：内部镶嵌的li标签的处理，主要如下： #nav ul li float: none;/浮动类型，无 margin: 0;/外边炬设置为0 padding: 0; /内边炬设置为0 +. /此处加其他美化修饰语言第六步：内部镶嵌的ul标签的鼠标悬停触发，主要如下： #ass li:hover ul display: block; /规定生成框类型，成块呈现下面是一个完整的实例：CSS Flyout #nav, #nav ul padding: 0;margin: 0;list-style: none;#nav li float: left;position: relative; width: 10em; border: 1px solid #B0C4DE; background-color: #E7EDF5; color: #2D486C;font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;margin-right: 1em;#nav a:link, #nav a:visited display: block;text-decoration: none;padding-left: 1em;color: #2D486C;#nav ul display: none;position: absolute; padding-top: 0.5em;#nav ul li float: none;border: 0 none transparent;border-bottom: 1px solid #E7EDF5;background-color: #F1F5F9;font-size: 100%;margin: 0;margin-bottom: 0.5em;padding: 0;#nav li:hover ul display: block;S