原创力文档- 1、本文档共5页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
六步解析现css二级菜单
基本功能实现图：
开始之前：
Html body内 关于导航菜单的基本格式
body
div 此标签可自定义
ul id = “ass”
lia href = “#”aaaa/a
//内部镶嵌的ul标签
ul
//二级菜单列表
lia href = “#”1111/a/li
lia href = “#”2222/a/li
lia href = “#”3333/a/li
/ul
/li
lia href = “#”bbbb/a
//内部镶嵌的ul标签
ul
//二级菜单列表
lia href = “#”1111/a/li
lia href = “#”2222/a/li
lia href = “#”3333/a/li
/ul
/li
//重复部分
…………
/ul
div
/body
开始编辑 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
head
titleCSS Flyout /title
style
#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-
文档评论（0）