纯洁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 可以更容易 ...
随机推荐
- redis的分布式解决方式--codis （转）
codis是豌豆荚开源的分布式server.眼下处于稳定阶段. 原文地址:https://github.com/wandoulabs/codis/blob/master/doc/tutorial_zh ...
- nutch搏斗之一
nutch搏斗之一 问题描述: 在用nutch1.0做generate 包括5亿url的crawldb时,它默认按照64M分块,分成777个map task,在运行的后期出现 Could not fi ...
- Cocos2d-x3.0 Button
Size widgetSize = Director::getInstance()->getWinSize(); Text* alert = Text::create("Layout& ...
- 《effective java》读书札记第三条用私有构造器或者枚举类型强化Singleton属性
Singleton指只被实例化一次的类.一般用来搞那些创建很耗资源或者要求系统中只能有一个实例的类. 这个很经常使用.记得曾经实习面试的时候就有这个面试题. 一般採用的方法是将构造器私有化,然后提供一 ...
- SlidingMenu开源项目滑动界面的实现总结
先上图 须要准备的是先得在GitHub上下载ActionBarSherlock-master.zip,和SlidingMenu-master.zip这两个开源文件,然后解压这两个包,SlidingMe ...
- DIV水平和垂直居中的实现
在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style ty ...
- Android平台调用Web Service：螺纹的引入
连接文本 剩下的问题 MainActivity的onCreate方法中假设没有有这段代码: // 强制在UI线程中操作 StrictMode.setThreadPolicy(new StrictMod ...
- sort 工具总结
sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. -u 去除重复行 -r sort默认的排序方式是升序,如 ...
- java输入输出高速
头文件: import java.io.*; 定义: BufferedReader in = new BufferedReader(new InputStreamReader(System.in)); ...
- 重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement
原文:重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement [源码下载] 重新想象 Windows 8 Store Apps (6) ...