纯洁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 可以更容易 ...
随机推荐
- 开放源代码的微微信.NET 0.8 版公布了
微微信.NET 0.8 版公布了 A.源代码应用范围: 未认证的和经过认证的微信订阅号.微信服务号均可使用,本源代码的每个模块都提供全然的 ASP.NET C#源代码,绝对不含 ...
- Nagios+pnp4nagios+rrdtool 安装配置nagios（一）
基于的软件版本 Apache-2.0.63 php-5.3.2 nagios-3.2.3 nagios-plugins-1.4.15 rrdtool-1.4.5 nrpe-2.12 pnp4na ...
- Jquery 对话框确认
$("#aa").click(function(){ if(confirm("是否继续")){ $(#aa).fadeOut(500); } })
- cocos2d-x-3.0新建工程以及移植其他平台
本文来自:http://www.zaojiahua.com/cocos2d-x-3-0.html 有将近俩个礼拜没有研究cocos2dx了,博主最近刷了些ACM的水题,越做感觉越没意思,这哪是考编程啊 ...
- Radmin远程控制软件
Radmin远程控制软件 日期:2015-08-20 作者:lujl Radmin是一款快速的远程控制软件,可以用来远程管理公司或个人计算机来实现远程办公.你可以通过鼠标和键盘来控制远程的 ...
- 关于git的ssh-key:解决本地多个ssh-key的问题
在设置github的时候,官方的说明文档要求备份当前的id_rsa.然后生成一份新的私钥用于github的登陆.假设真这样做,那么新的私钥是无法再继续登陆之前的机器的. 这样的方法有点暴力- 还好ss ...
- HttpDNS 服务详解(转)
但凡使用域名来给用户提供服务的互联网企业,都或多或少地无法避免在有中国特色的互联网环境中遭遇到各种域名被缓存.用户跨网访问缓慢等问题.那么对于腾讯这样的域名数量在10万级别的互联网公司来讲,域名解析异 ...
- Error: ORA-16501: the Data Guard broker operation failed ORA-16625: cannot reach database
在备库上建配置文件 DGMGRL> create configuration 'sharkdbbork' as primary database is 'sharkdb' connect ide ...
- 【Spark亚太研究院系列丛书】Spark实战高手之路-第一章 构建Spark集群（第五步）（2）
把下载下来的"hadoop-2.2.0.tar.gz"复制到"/usr/local/hadoop/"文件夹下并解压: 改动系统配置文件,改动~/.bashrc文 ...
- 当执行游戏0xc000007b错误的解决方法
如图,这个错误使无数玩家烦恼. 出现这个错误,可能是硬件的问题,也可能是软件的问题.可是,因为硬件引起该问题的概率非常小,而且除了更换硬件之外没有更好的解决方法,因此本文将具体介绍怎样通过软件解决此问 ...