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

基本功能实现图： 开始之前： Html body内 关于导航菜单的基本格式 ul id “ass” a href “#” aaaa //内部镶嵌的ul标签 //二级菜单列表 a href “#” 1111 a href “#” 2222 a href “#” 3333 a href “#” bbbb //内部镶嵌的ul标签 //二级菜单列表 a href “#” 1111 a href “#” 2222 a href “#” 3333 //重复部分 ………… 开始编辑 css 二级导航菜单部分的代码： 第一步： 此div标签内部所有 ul 标签样式设置，主要如下 #ass ,#ass ul padding: 0; //内边炬设置为0 margin: 0; //外边炬设置为0 list-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; //规定生成框类型，成块呈现 下面是一个完整的实例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns /1999/xhtml 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; ul id nav a href # Starters a href # Fish a href # Fruit a href # Soups a href # Main courses a hr