纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异，但我还是写，记笔记，也为您提供参考
我希望你能指导批评~~
首先，我们必须列出ul li 开始我们的导航栏菜单也能说生产：
在下面的页面，我们先建XHTML结构体：
<body>
<ul id="navWrapper">
<li>
<a href="#">Menu A</a>
<ul>
<li><a href="#">Menu A, Item 1</a></li>
<li><a href="#">Menu A, Item 2</a></li>
<li><a href="#">Menu A, Item 3</a></li>
<li><a href="#">Menu A, Item 4</a></li>
<li><a href="#">Menu A, Item 5</a></li>
<li><a href="#">Menu A, Item 6</a></li>
</ul>
</li>
<li>
<a href="#">Menu B</a>
<div id="test"><a href="#">Menu B, Item 1</a></div>
</li>
</ul>
<div id="banner"></div>
<div id="content">
<p>Page content here.</p>
</div>
</body>
效果：
接着。我们来一步一步设计样式及功能（先给每一个元素加个边框以便兴许样式设计差别）：
样式代码：
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
border:1px solid black;
}
</style>
效果：
这样我们就能够好区分。好设计了~~
以下去掉链接的下滑线和列表的“.”“。
”，而且使父级的列表横向排列。子级列表还是纵向排列，这样才像下拉菜单嘛~~（这里是两级列表嵌套，一个父级一个子级）
样式代码：
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
border:1px solid black;
} a{
text-decoration:none;
}
ul#navWrapper li{
float:left;
list-style:none;
}
ul#navWrapper li ul li{
float:none;
}
div#banner{
clear:both;
}
</style>
效果：
以下来隐藏子级列表和子级容器（这里子级容器是指id为test的div容器），当鼠标移动到父级列表时相相应的子级列表显现出来，通过“ :hover ”实现，隐藏显现通过display的“ none ”和“ block ”来实现，注意这里不用visibility的“ hidden ”和“ visible ”来实现，至于差别大家能够把相应的属性换成visibility来看看效果。这里就不实现了
样式代码：
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
border:1px solid black;
} a{
text-decoration:none;
}
ul#navWrapper li{
float:left;
list-style:none;
}
ul#navWrapper li ul li{
float:none;
}
div#banner{
clear:both;
} ul#navWrapper ul,ul#navWrapper div#test{
display:none;
position:absolute;
}
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
display:block;
}
</style>
效果：
这里有一点须要注意，当不设置子级的position为“ absolute ”时，鼠标移动到父级，出现的子级会在页面占领一定的位置。那么“ Page content here ”将会产生移动。这是十分不好的。所以我们设置子级“ position:absolute; ”，这样便能够使它们脱离正常的流程。不影响后面的内容位置。
再将父级位置略微偏移下和将第一个父级下的自己列表向左偏移与父级边框对齐，而且给第二个父级下的div容器一定的“容积”
样式代码：
<style>
ul{
border:1px solid red;
}
li{
border:1px solid lightgreen;
}
div{
border:1px solid black;
} a{
text-decoration:none;
}
ul#navWrapper li{
float:left;
list-style:none;
}
ul#navWrapper li ul li{
float:none; margin-left:-41px;
}
div#banner{
clear:both; height:50px;
margin-top:30px;
} ul#navWrapper ul,ul#navWrapper div#test{
display:none;
position:absolute;
}
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
display:block;
} ul#navWrapper{
margin-left:-41px;
}
ul#navWrapper div#test{
height:200px;
width:600px;
background:lightgray;
}
</style>
效果：
将全部边框去掉后这里最主要的结构就设计好了，其它的样式能够任意调整啦~~
比方：
将全部边框去掉后，并对总体进行下设计
样式代码：
<style>
body,div,ul,li{
padding:0;
margin:0;
}
a{
text-decoration:none;
}
ul#navWrapper li{
float:left;
list-style:none; height:45px;
line-height:45px;
}
ul#navWrapper li ul li{
float:none;
}
div#banner{
clear:both; height:50px;
margin-top:50px;
margin-left:50px;
}
div#content{
margin-left:50px;
}
ul#navWrapper ul{
display:none;
position:absolute;
background:#CCC;
}
ul#navWrapper div#test{
display:none;
position:absolute;
height:200px;
width:600px;
background:#cde6c7;
}
ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
display:block;
} ul#navWrapper{
background:#CCC;
height:45px;
width:960px;
margin:0 auto;
margin-top:30px;
} li a{
font-size:24px;
color:#333;
display:block;
height:45px;
padding:0 20px;
}
li a:hover{
color:#fff;
background:#000;
}
</style>
效果：
图一：
图二：
OK。这就是在以上基本结构上设计的一个样例了。
假设还须要设计。仅仅须要在以上最基本结构上设计即可了~~
參考文献：微软官方档“如何创建CSS下拉式菜单”
版权声明：本文博主原创文章。博客，未经同意不得转载。
纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）的更多相关文章
- 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏
一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...
- React实现顶部固定滑动式导航栏（导航条下拉一定像素时显示原导航栏样式）
摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...
- 关于ios11 tableView和ScrollView受导航栏影响向下偏移的问题
看到网上说法ios11中automaticallyAdjustsScrollViewInsets属性被废弃,所以要设置tableView.contentInsetAdjustmentBehavior ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- CSS：CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- Bootstrap <基础十二>下拉菜单（Dropdowns）
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
随机推荐
- SE 2014年4月18日
实验需求: R1 R2 R3用环回口建立IBGP对等体(使用对等体组),AS号为100 R4 R5 R6用环回口建立IBGP对等体(使用对等体组),AS号为 ...
- nutch搏斗之一
nutch搏斗之一 问题描述: 在用nutch1.0做generate 包括5亿url的crawldb时,它默认按照64M分块,分成777个map task,在运行的后期出现 Could not fi ...
- 祖国版Solowheel！IPS103 独轮思维车 - 三个月体验报告
http://tieba.baidu.com/f?kz=2308652773&mo_device=1
- SVN的revert和update命令的区别
svn中的revert和update 今天有人问到revert和update的问题. 刚开始还真被问住了. 因为感觉revert和update都可以将本地的copy更新到以前的一个版本,会有什么不同呢 ...
- javascript UniqueID属性
在Web页中的每一个HTML元素都一个ID属性,ID作为其标示,在我们的普通理解中它应该是unique的.但是HTML元素的ID属性是可写的,这就造成了我们非常可能人为的使ID的反复.按么假设 ...
- ORACLE函数之日期时间运算函数
1 ADD_MONTHS 格式:ADD_MONTHS(D,N) 说明:返回日期时间D加N月后相应的日期时间.N为正时则表示D之后:N为负时则表示为D之前.N为小数则会自己主动先删 ...
- hdu5115（区间dp）
n头狼排成一列,每头狼有两个属性,基础攻击力和附加攻击力, 第i只狼的基础攻击力是ai,附加攻击力是b(i-1) + b(i+1) 消灭一只狼,受到的伤害为基础攻击力+附加攻击力. 问消灭所有的狼受到 ...
- 点集配对问题（状态dp）
给定n个点(n是偶数)使得两个点两两配对,最后总的距离和最小. 用是表示集合,那么dp[s]表示集合s配对后的最小距离和 , 状态转换方程为 表示集合中任意拿两个元素配对,然后转移为更小的两个集合 ...
- VS2010中使用CL快速 生成DLL的方法
方案一: 1.命令行中输入cl example.cpp,生成example.obj和example.lib文件.有可能还会提示“没有入口点”的错误.这是因为我们的CPP中是要生成dll文件的,并没有m ...
- Sliverlight之 特效
1,OpacityMask控件的部分渐隐(见Project16) (1) 控件的OpacityMask有什么作用 说明:设置所选区域不透明度的画笔,一般结合LinearGradientBrush或Ra ...