纯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实现导航条及导航下拉容器）的更多相关文章
- 用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- CSS：CSS 下拉菜单
ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...
- CSS实现下拉菜单的几种方法
PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- bootstrap-js(2)下拉菜单
1.下面的实例演示了在导航栏内和标签内的下拉菜单的用法: <!DOCTYPE HTML><html><head><link href="/style ...
随机推荐
- VS：101 Visual Studio 2010 Tips
101 Visual Studio 2010 Tips Tip #1 How to not accidentally copy a blank line TO – Text Editor ...
- 模仿mybatis,用jdk proxy实现接口
在mybatis中,我们都只需要定义一个mapper接口,但并不需要对它进行任务实现.只要有对就的mapper.xml文件就可以访问数据库.那么,没有接口的访问是如何实现的呢. 答案就是JDK pro ...
- 什么是ORM?
一.ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.简单的说,ORM是通过使 ...
- JScrollBar
接到了GUI相关的task,从来没看Java的我只好各种百度加看书了.这里介绍了 JScrollBar 的简单应用. 话不多说,直接上代码和效果图. import java.awt.*; imp ...
- FreeRTOS学习及移植笔记之一：开始FreeRTOS之旅
1.必要的准备工作 工欲善其事,必先利其器,在开始学习和移植之前,相应的准备工作必不可少.所以在开始我们写要准备如下: 测试环境:我准备在STM32F103平台上移植和测试FreeRTOS系统 准备F ...
- Win10 Build9926 更新问题解决
将Dns 改为 4.2.2.2 备用 4.2.2.1
- 表格中每行的checkbox只能选中其中一个jquery实现
HTML代码: <span class="number">12.</span> <div class="survey_txt mgl20&q ...
- bzoj4260
题目大意:求不相交的两段区间,两段的异或和加起来最大是多少 区间异或和记得转化成前缀和啊我个sb 变成一对数的异或值就变成trie了啊 两段区间的话,从左往右一颗trie,从右往左一颗trie #in ...
- node.js grunt文件压缩
对于前段来说,熟悉node的人其实还并不是太多,如果您想入门一门后端语言我建议还是从node入手最好. 我也是最近开始学习node,来谈谈近期对node的学习的心得. 提到node首先就是要安装一大堆 ...
- Yii2的urlManager URL美化
Yii1.*与Yii2中配置路由规则rules是几乎是一样的,但还是有细微的差别. 在Yii1.*中开启path路由规则直接使用 'urlFormat' => 'path', 但在Yii2中已经 ...