纯洁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 可以更容易 ...
随机推荐
- svnkit添加节点
package com.repositoryclient.svnoptions; import org.tmatesoft.svn.core.SVNException; import org.tmat ...
- DotNet基础
DotNet基础 URL特殊字符转义 摘要: URL中一些字符的特殊含义,基本编码规则如下: 1.空格换成加号(+) 2.正斜杠(/)分隔目录和子目录 3.问号(?)分隔URL和查询 4.百分号(%) ...
- Knockout应用开发指南 第七章：Mapping插件
原文:Knockout应用开发指南 第七章:Mapping插件 Mapping插件 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些 ...
- hdu1874畅通工程续 (dijkstra)
Problem Description 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行 ...
- uvalive 2088 - Entropy(huffman编码）
题目连接:2088 - Entropy 题目大意:给出一个字符串, 包括A~Z和_, 现在要根据字符出现的频率为他们进行编码,要求编码后字节最小, 然后输出字符均为8字节表示时的总字节数, 以及最小的 ...
- cocos2D-x 3.5 引擎解析之--引用计数（Ref），自己主动释放池（PoolManager），自己主动释放池管理器（ AutoreleasePool）
#include <CCRef.h> Ref is used for reference count manangement. If a classinherits from Ref. C ...
- [ACM] HDU 2063 过山车 （二分图，匈牙利算法）
过山车 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- MongoDB获得短暂的
大约MongoDB该数据是现在比较少.和大多数英文网站.最上面的经笔者从官方网站翻译.请翻译或误解之处请作证.然后,我们将继续关注MongoDB,和翻译“Developer Zone”和“Admin ...
- Ubuntu Linux 永山(mount)分
在一般情况下,我们想安装一个分区解决方案是使用mount命令,因为我想/dev/sda3安装/media/aborn/data通过使用下面的命令 sudo mount /dev/sda3 /media ...
- [Elasticsearch] 控制相关性 (一) - 后面的相关度分值理论计算
从第一章翻译Elasticsearch官方指南Controlling Relevance一章. 控制相关度(Controlling Relevance) 对于仅处理结构化数据(比方日期.数值和字符枚举 ...