二级菜单被div给遮住了_折叠式菜单项目

于 2021-01-26 04:25:43 发布
阅读量390 收藏
点赞数
文章标签： 二级菜单被div给遮住了
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35745915/article/details/113330546
版权

HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折叠式菜单3</title>
<link rel="stylesheet" type="text/css" href="menu.css"/>
<script src="jquery-1.12.4.js"></script>
</head>
<body>
<ul class="menu_list">
<li>
<p class="menu_head">目标管理</p>
<div class="menu_body">
<a href="">主题空间</a>
<a href="">项目任务</a>
<a href="">工作计划</a>
<a href="">日程事件</a>
<a href="">时间视图</a>
</div>
</li>
<li>
<p class="menu_head">会议管理</p>
<div class="menu_body">
<a href="">主题空间</a>
<a href="">会议安排</a>
<a href="">待开会议</a>
<a href="">已开会议</a>
<a href="">会议资源</a>
</div>
</li>
<li>
<p class="menu_head">知识社区</p>
<div class="menu_body">
<a href="">我的收藏</a>
<a href="">知识广场</a>
<a href="">文档中心</a>
<a href="">我的博客</a>
<a href="">文档库管理</a>
</div>
</li>
<li>
<p class="menu_head">我的工具</p>
<div class="menu_body">
<a href="">综合查询</a>
<a href="">通讯录</a>
<a href="">便签</a>
<a href="">计算器</a>
<a href="">万年历</a>
<a href="">常用链接</a>
</div>
</li>
</ul>
</body>
</html>CSS代码：

* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
margin: 100px;
}
.menu_head {
width: 185px;
height: 47px;
line-height: 47px;
padding-left: 38px;
font-size: 17px;
color: #475052;
cursor: pointer;
border: 1px solid #e1e1e1;
position: relative;
margin: 0px;
font-weight: bold;
background: #f1f1f1 url(../img/pro_left.png) center right no-repeat;
}
.menu_list .current {
background: #f1f1f1 url(../img/pro_down.png) center right no-repeat;
}
.menu_body {
width: 223px;
height: auto;
overflow: hidden;
line-height: 38px;
border-left: 1px solid #e1e1e1;
backguound: #fff;
border-right: 1px solid #e1e1e1;
}
.menu_body a {
display: block;
width: 223px;
height: 38px;
line-height: 38px;
padding-left: 38px;
color: #777;
background: #fff;
text-decoration: none;
border-bottom: 1px solid #e1e1e1;
}

Js代码：

<script>//隐藏所有二级菜单
$('.menu_head +div').hide();//显示当前，隐藏其它
$('.menu_head').click(function () {
var flag=$(this).next('div');//设置当前菜单右侧图标样式
if (flag.is(':hidden')){
$(this).css('backgroundImage','url(img/pro_down.png)');
$(this).next('div').slideDown();
} else{
$(this).css('backgroundImage','url(img/pro_left.png)');
$(this).next('div').slideUp();
}
});
</script>

项目运行效果如下：

41417d9dc59fc6f78965acbac863cb67.png
https://www.zhihu.com/video/1232699655655821312
首席程序IT
关注
Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）
王佳斌
04-20 4738
vue css 垂直侧边栏，vue 竖向菜单示例代码，css vue实现垂直分类菜单，vue 实现css竖向菜单分类并且鼠标移入后显示二级菜单详细示例源码，vue实现鼠标移过出现下拉二级菜单功能，用Vue怎么实现鼠标滑过一级导航,显示二级菜单，vue鼠标移入父级菜单显示二级菜单，CSS 鼠标移入悬停后右侧显示二级菜单，vue css 输入移入分类菜单后右侧显示二级菜单，vue css 竖向菜单分类, 鼠标移入右侧显示更多分类，vue点击左侧菜单右侧显示内容，vue实现左侧导航，鼠标点击或移入时显示右侧多级菜
html 中怎么写二级导航,html二级菜单导航栏成品
weixin_42419782的博客
05-30 4175
html 高级二级导航菜单代码如下： #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: block; width: 100%; margin: 0; position: relative; } #menu ul li { list-style-type: none; float: lef...
DIV CSS鼠标悬念下拉出大面积的二级菜单.rar
07-10
DIV CSS技术实现的鼠标悬念下拉出大面积的二级菜单，这种菜单微软、Adobe等大公司网站上目前还在使用，严格来说这不像是菜单，但却有着体验很好的导航功能，当菜单显示时，篇幅占据几乎整个窗口，面积比较大的菜单导航栏，可显示菜单，也可显示若干图片，整个菜单其实更像是一个网页那样，本效果请参见截图所示的效果。
为什么二级菜单会被挡住_两个Div，上面的有下拉菜单，为什么被下面的DIV遮挡了？...
weixin_35648005的博客
01-14 719
无标题文档#header{height:88px; background:#F5F5F5; position:relative; margin-bottom:2px; z-index:1;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,tr,table,tbody,thead,tfoot,em,st...
二级菜单ie中被下面的div遮挡解决问题
Dean_kai的博客
03-02 4565
这个很可能是误设置了position属性，如POSITION: relative;解决这个办法在当前层设置z-index都是无效的，即使将弹出层所在父层的z-index设置到999，可弹出层依然会被底下的div遮挡住。造成这个原因是层的叠加原因，叠加原则中指出，非同辈元素，任意一者或其祖元素拥有动态定位时，同时各自向上寻找动态定位的祖元素，并分别从中拿出具备最高级别的祖元素（或其本身）进行比较
为什么二级菜单会被挡住_下拉导航菜单被遮住解决办法
weixin_39859128的博客
12-18 2801
近期有几位客户购买了“天兴模板工作室自用模板”后自行修改时发现了一个问题。在把这个下拉菜单移到左侧或者直接在左侧加下拉菜单时候发现：下拉菜单被下面的滚动幻灯片给遮住了。这个问题是由于div的定位造成的，幻灯片由于使用了js的关系使用了很多绝对或者相对定位。解决办法如下：在封装幻灯片的div的id属性后面加上一句代码：代码如下 复制代码style="z-index:-999;position:rel...
为什么二级菜单会被挡住_为什么我的html导航下拉菜单会被下面的网页内容挡住？...
weixin_39534780的博客
12-18 1072
*{margin:0;padding:0;}body{background:#999900;}#navcont{background:#999900;width:100%;}#nav{font-family:helvetica;position:relative;width:900px;heig...*{margin:0; padding: 0;}body{ background:#999900;...
HTML+CSS制作二级菜单栏
热门推荐
孙婷婷的博客
12-24 2万+
今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！ 链接：https://pan.baidu.com/s/1doPA17vy--Qt...
vue——二级菜单demo
qq_41261490的博客
05-22 3873
学习了vue，最近想着写一写demo练一练，今天写的二级菜单，中间踩过很多坑 1、存数据：最开始想着一级菜单存一个数组，二级菜单存不同的数组。那么问题来了，一级菜单和二级菜单应该是超级相关联的，如果分开存储再去建立关系很麻烦，所以存在一个数组对象中，那么也就是说，不管多少级菜单都可以这样，又方便还不需要我们自己去建立相关关系。 2、‘^’ 的变化，最开始想着不同状态用v-show去操作dom...
解决SpringBoot运行时网页二级菜单被遮挡的问题
学而不思则忘
06-09 453
本文章记录的是我开发过程中遇到的问题，仅供参考 我使用的是xadmin模板，修改好xadmin.css中关于背景图的样式后，在本地打开后二级菜单显示一切都很正常。但是，当我运行到springboot中后，鼠标指向二级菜单后被背景图片遮挡在最下方。这个问题让我很不理解？为什么本地和springboot运行结果会有差异？以后有待深究。 现附上一篇讲解z-index的文章链接：https://www.cnblogs.com/ForEvErNoME/p/3373641.html 对于这个层级叠加： 于是上网搜索
div怎样在object上面显示不被object动画给遮挡
09-28
当鼠标移至菜单按钮时，子菜单的div出现了，但是被object动画给遮挡住而无法显示，针对这个问题，下面有个不错的解决方法，希望对大家有所帮助
巧用jquery解决下拉菜单被Div遮挡的相关问题
10-26
本篇文章主要是对巧用jquery解决下拉菜单被Div遮挡的相关问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
解决下拉菜单被iframe遮住问题
07-28
解决下拉菜单被iframe遮住问题吗，
div被iframe遮住的几种情况及解决方法
12-10
类似结构： 复制代码代码如下:</iframe”>http://caibaojian.com”></iframe 第一种：透明背景被遮住 当div使用透明的背景时，无论是使用（opacity或者rgba格式），除了chrome，其它浏览器都出现div被iframe遮住的情况。 解决方法： div使用不透明背景或者使用透明的背景图片。 第二种：ie8中z-index失效 在ie中，iframe里引入video视频播放会导致div的z-index无效，即div的z-index无论
ul导航条二级菜单被遮盖
qq_42655885的博客
07-12 1854
遮盖二级菜单
CSS3 3D上移菜单
cuken7684698822的博客
08-02 209
CSS3 3D top shift menu In this tutorial I will show you how to create animated 3D navigation menu (with images) with CSS3 only (JavaScript-free ). We will be using the power of CSS3 effects like persp...
二级下拉菜单被遮住，css设置z-index在ie下没作用的问题解决办法
weixin_33871366的博客
10-10 451
用jQuery做了个鼠标经过出现的二级菜单加动画效果，firefox下完美呈现，IE下下拉菜单有些会被下面的网页内容遮住，例如iframe，div，下拉框，输入框等，开始折腾ie css。在ie下设置了z-index结果没有任何效果，整了个jQuery插件:bgiframe，结果只能解决ie6下面的选择框。被IE的z-index bug整的晕死了，几番折腾搞定了，注意点：1. 注意设置父元素的z-...
二级菜单被iframe遮住的处理方法
weixin_30632089的博客
01-19 1044
我们经常看到二级选单被flash或者iframe挡住, 此时设定再高的z-index也无效, 解决方法: (1)通常使用iframe引用一个flash时是这样写的: <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/lZqrG1bdGtg" f...
响应式二级导航菜单教程：jQuery与CSS3结合实现
"一款基于jQuery和CSS3的响应式二级导航菜单教程，展示了如何创建一个传统的顶部导航，当鼠标悬停时显示二级菜单，并结合了响应式设计，适应不同设备的显示需求。" 在Web开发中，导航菜单是网站的重要组成部分，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值