css用hover制作下拉菜单

首先我们的需求就是制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}.title{background-color: #2b99ff;height: 50px;line-height: 50px;text-align: center;color: #3d2fa2;}.user{width: 180px;height: 50px;margin-left: 20px;background-color: #7a7b50;cursor: auto;}.user .msg{display: none;width: 200px;height: 40px;float: left;border: 1px solid red ;background-color: #787b53;z-index: 2;position: relative;}.user .msg a:hover{cursor: pointer;}.clearfix:after{content:"0";display: block;clear: both;visibility: hidden;height: 0;}.user:hover .msg{display: block;}.text{font-size: 30px;color: black;background-color: #99aecb;height: 800px;position: absolute;width: 1500px;z-index: 1;}</style>
</head>
<body><div class="title"><div class="user clearfix">用户<div class="msg"><a>博客</a></div><div class="msg"><a>闪存</a></div><div class="msg"><a>积分</a></div><div class="msg"><a>评论</a></div><div class="msg"><a>关注</a></div></div><div class="text">文档内容</div></div>
</body>
</html>

实现的方法: 首先先做一个html的标签,做个基本的样式出来,我们想把用户这个框鼠标触摸后有下拉菜单

做好后的效果:

要实现这个功能是要注意几个细节的不然会做的四不像.

1,代码实现首先需要注意清除float的浮动.这样才能让下拉框的背景饱满撑起来这时候要看CSS中的 .clearfix:afttr 的方法这个是固定内容 ,用来清除float.

2 , .user .msg 的display: none 这是首先用来隐藏下拉的几个标签随后hover的时候 display会重新覆盖block;使其出现

3 这里注意,下拉菜单完成后继续写后面的text菜单时弹出的画面其实是会被下方的text 标签覆盖的..这时候要注意text会覆盖弹出画面显示不出来,因为他们是兄弟标签,所以我们可以给他们加上z-index的属性来改变层级,让前面的覆盖后面,(z-index必须要和position配合)

4 text这里加上了个position=absolute,如果不加弹出菜单会影响文档流,让文档内容改变位置.

转载于:https://www.cnblogs.com/laoguiaabb/p/8066234.html

css用hover制作下拉菜单相关推荐

js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
使用CSS制作下拉菜单样式
CSS制作下拉菜单制作tooltip显示形式代码示例实现原理 HTML 部分 CSS 部分制作可点击的下拉菜单实现原理代码示例 Appdex 制作tooltip显示形式代码示例 < ...
纯CSS实现蓝色圆角下拉菜单
代码简介: 这个菜单没有使用任何的图片,完全是用CSS实现的,包括圆角效果也同样是,而且还考虑了多浏览器的兼容性,可以说非常不错,既兼容性好,又外观漂亮,下拉导航菜单目前比较流行,好好感觉一下本款菜单 ...
html中通过定位实现下拉,JS+CSS相对定位实现的下拉菜单
本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
CSS设置七彩的下拉菜单
CSS设置七彩的下拉菜单 CSS不仅可以控制下拉菜单的整体字体和边框,而且,可以设置每一个选项的背景色和文字颜色. 首先,建立HTML部分,包括表单.下拉菜单.各个选项和按钮等等. <span ...
jq中查找上级_必备实用技能：在EXCEL中制作下拉菜单
发出去表格统计信息,收回来时却发现填得乱糟糟?小白通教你制作下拉菜单,填表人只能规规矩矩从你给的选项中填.认真学习,这个是必备技能哦. 单级下拉菜单 1. 选择需要编辑的单元格,选择"数据- ...
excel添加列下拉框票价_excel表格下拉表格添加数据-excel2017表格中怎么制作下拉菜单列表框...
在Excel表中,如何将增加下拉菜单的选项? excel中的下拉菜单选项,就是筛选的功能,具体操作如下: 1.首先选中a.b两列数据,在"开始"选项卡上选择"筛选&quo ...
Excel中如何制作下拉菜单
文字教程准备好需要生成的清单选择你想制作下拉菜单的单元格依次点击数据→数据验证在弹出的数据验证菜单中选择第一个设置页(默认也是这个) 在允许下面选择序列(会跳出一个来源) 点击选择按钮,选择序 ...

css用hover制作下拉菜单

css用hover制作下拉菜单相关推荐

最新文章

热门文章