css实现下拉菜单功能（多中实现方式即原理）
引导思路：
1.需要用到的元素：position hover (z-index) 或（overflow）或（display）等等。
关键点就是div的溢出部分的处理。
2.实现过程：
2.1：就是要把你需要做的菜单的div，放在你触碰的那个div中
2.2：给一个定位，让他到外面去（注意两个div之间要衔接起来）
2.3：在你触碰的div设置具体的值（比如说，一开始（菜单div）的z-index是负数，当年触碰时(触碰div)z-index值变大）
如果要用z-index就需要注意poistion这个属性值。
下面是z-index的示例；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
width: 1024px;
height: 500px;
}
.all{
width:100%;
height: 200px; }
.head{
width: 600px;
height: 100px;
background-color: green; }
.head_wei{
width: 100px;
height: 100%;
background-color: pink;
position: relative; }
/*对你下拉外的div进行设置*/
.head_wei:hover{
z-index: 2;
}
.xiala{
width: 150px;
height: 180px;
background-color: pink;
position: relative;
top:100px;
z-index: -2;
} .hand{
width: 600px;
height: 200px;
background-color: gold;
z-index: 4;
}
</style>
</head>
<body>
<div class="all">
<div class="head">
<div class="head_wei">
<div class="xiala"></div>
</div>
</div>
<div class="hand"></div>
</div>
</body>
</html>
下面就是over-flow的示例(更上面的一样就是将z-index换成over-flow)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
width: 1024px;
height: 500px;
}
.all{
width:100%;
height: 200px; }
.head{
width: 600px;
height: 100px;
background-color: green; }
.head_wei{
width: 100px;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden; }
/*对你下拉外的div进行设置*/
.head_wei:hover{
overflow: visible;
}
.xiala{
width: 150px;
height: 180px;
background-color: pink;
position: relative;
top:100px;
/*z-index: -2;*/
} .hand{
width: 600px;
height: 200px;
background-color: gold;
/*z-index: 4;*/
}
</style>
</head>
<body>
<div class="all">
<div class="head">
<div class="head_wei">
<div class="xiala"></div>
</div>
</div>
<div class="hand"></div>
</div>
</body>
</html>
css实现下拉菜单功能（多中实现方式即原理）的更多相关文章
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- HTML+CSS写下拉菜单
今天学习了使用HTML+CSS实现下拉菜单效果,在这个例子中,我学到了如下知识点: 设置背景图片(background-image.background-size) 如何让无序列表横向显示(float ...
- 用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- CSS实现下拉菜单的几种方法
PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...
- 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）
虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...
- 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）
虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...
- 纯css实现下拉菜单
今天给大家分享一个纯html+css实现的下拉菜单.在此声明一点,源码并非出自本人之手,是同项目组一兄弟PLUTO写的.好东西嘛,所以果断拿出来和大家分享.如果有更好的想法或者建议,一定记得留言哦!好 ...
- html5 css练习 下拉菜单制作
*{ margin: 0; padding: 0;}li{ list-style-type: none;}a{ text-decoration: none;}.ul1{marg ...
随机推荐
- javascript实现数据结构：稀疏矩阵的十字链表存储表示
当矩阵的非零个数和位置在操作过程中变化大时,就不宜采用顺序存储结构来表示三元组的线性表.例如,在作“将矩阵B加到矩阵A上”的操作时,由于非零元的插入或删除将会引起A.data中元素的移动.为此,对这种 ...
- Visual Studio Code 设置中文语言版本
设置方法有两种: 方法一1.选择扩展 搜索“Language”,在下列选项选择 Chinese (Simplified) Language Pack for Visual Studio Code安装, ...
- CSS3中的Flexbox弹性布局（二）
flexbox详解 flexbox的出现是为了解决复杂的web布局,因为这种布局方式很灵活.容器的子元素可以任意方向进行排列.此属性目前处于非正式标准. flex布局模型不同于块和内联模型布局,块和内 ...
- PHP time() date() strtotime()日期函数总结
日期函数总结—— 一.返回时间戳——若整体数值超出计算机能力范围,返回空. 1. time();返回当前的 Unix 时间戳 例:$a=time(); var_dump($a); //输出:int( ...
- 关于 document.compatMode
今天查资料时无意发现一个以前没有注意到过的属性:document.compatMode 经过一番资料的查询后,了解到以下信息: 我们都知道IE有两种盒子模型,在不声明 !DOCTYPE 时是混杂模式 ...
- matlab练习程序（演化策略ES）
还是这本书上的内容,不过我看演化计算这一章是倒着看的,这里练习的算法正好和书中介绍的顺序是相反的. 演化策略是最古老的的演化算法之一,和上一篇DE算法类似,都是基于种群的随机演化产生最优解的算法. 算 ...
- liunx增强命令
查找命令 grep 格式:grep [option] pattern [file] 实例: ps -ef | grep sshd 查找指定 ssh 服务进程 ps -ef | grep sshd | ...
- 使用命令行执行.sql文件
用微软自带的sqlcmd工具,可以导入执行.以SQL Server 2008R版本为例: 第一步:Win+R 键入:cmd 命令,开启命令行工具: 第二步:键入:cd C:\Program Files ...
- vscode 显示"没有活动的源代码控制提供程序“处理
不知为何我的 VS Code 在 1.25 版本开始就一直 ”没有活动的源代码控制提供程序“,找了好几天都没找到,今天终于找到怎么处理了, 切换到插件中找到下图对应的 Git (可以直接再上面搜索框输 ...
- 转贴：天然VC的迷局
天然VC的迷局作者:棱子 http://www.jkzgr.net/jiankangguanli/176.html 维生素C对人类来说是一种必不可少的维生素.我们可以通过正常饮食获取所需的VC.市场上 ...