纯DIV+CSS弹出导航菜单代码-鼠标移过弹出层-笔记-零分杂记-收集建站知识，分享网络资源

纯DIV+CSS弹出导航菜单代码-鼠标移过弹出层

零分 2,708 2023-02-01 23:41

鼠标移过弹出层，不是很必要的时候，直接加一个:hover的CSS属性就可以。

鼠标移过弹出导航菜单CSS+DIV代码，对弹出层做一个display:none，鼠标移过时设置属性display:block;

纯DIV+CSS弹出菜单

nmouseover="this.style.display='block';document.getElementById('3').className='curr';"去调用CSS样式

完整代码：

CSS：

.div{width:1000px;padding:50px 100px;margin:0 auto;}
.div .nav{width:1000px;margin:0 auto;}
.div .nav .display{width:120px;border:1px solid #FF5400;height:140px; position:absolute;margin-left:120px;background-color:#FFF;z-index:999;display:none;}
.div .nav .display .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .display .li a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .display .li a:hover{background-color:#33A600;color:#fff;}
.div .nav .list{width:120px;padding:0px;border:1px solid #e4e4e4;height:140px;}
.div .nav .list .curr{background-color:#FF5400;color:#fff;}
.div .nav .list .curr .li a{color:#fff;}
.div .nav .list .li{width:120px;height:30px;border-bottom:1px solid #e4e4e4;line-height:30px;}
.div .nav .list .li:hover{background-color:#33A600;color:#fff;}
.div .nav .list .li a,.div .nav .list .lis a{text-decoration:none;color:#000;display:block;width:120px;height:30px;text-indent:5px;}
.div .nav .list .li a:hover{color:#fff;}
.div .nav .list .lis{width:120px;height:30px;line-height:30px;}

HTML：

<div class="div">
<div class="nav">
<div class="display" id="d1" onmouseover="this.style.display='block';document.getElementById('1').className='curr';" onmouseout="this.style.display='none';document.getElementById('1').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">1、二级菜单</a></div>
</div>
<div class="display" id="d2" onmouseover="this.style.display='block';document.getElementById('2').className='curr';" onmouseout="this.style.display='none';document.getElementById('2').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">2、二级菜单</a></div>
</div>
<div class="display" id="d3" onmouseover="this.style.display='block';document.getElementById('3').className='curr';" onmouseout="this.style.display='none';document.getElementById('3').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">3、二级菜单</a></div>
</div>
<div class="display" id="d4" onmouseover="this.style.display='block';document.getElementById('4').className='curr';" onmouseout="this.style.display='none';document.getElementById('4').className='';">
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
<div class="li"><a href="//www.32xp.com" target="_blank">4、二级菜单</a></div>
</div>
<div class="list">
<div id="1">
<div class="li"  id="l1" onmouseover="document.getElementById('d1').style.display='block';" onmouseout="document.getElementById('d1').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="2">
<div class="li"  id="l2" onmouseover="document.getElementById('d2').style.display='block';" onmouseout="document.getElementById('d2').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="3">
<div class="li"  id="l3" onmouseover="document.getElementById('d3').style.display='block';" onmouseout="document.getElementById('d3').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div><div id="4">
<div class="li"  id="l4" onmouseover="document.getElementById('d4').style.display='block';" onmouseout="document.getElementById('d4').style.display='none';"><a href="//www.32xp.com" target="_blank">菜单</a></div>
</div>
</div>
</div>
</div>

标签：CSS弹出层，CSS弹出菜单

智慧法语：这样才是最美的女人 PHP下载远程图片到本地服务器

记一次宝塔MySQL无法启动的问题

去顺丰送快递之后，一直就没有管理打开网站，好像不去之前也没怎么更新难得休息，打算更新下企业模板，发现无法打开。显示链接数据库失败。进入宝塔后台，发现MySQL停止了运行。第一时间启动MySQL，但是发现一直启动失败。之后更新了下宝塔，更新了下MySQL，还是无法启动。百度了一番，发现原来我是真的看不懂那些日志。只好找些看得懂的来测试。删除了两个文件 /www/server/data/ib_logfile0 /www/server/data/ib_logfile1 无法启动，注释了innodb_开头配置 #innodb_data_home_dir = /www/server/dat

笔记 1,281 2个月前

网站设置开灯（亮模式/白天）和关灯（暗模式/黑夜）效果

在很早之前，这个效果叫做开灯/关灯，现在叫做白天/黑夜，曾经有那么一段时间没有看到过这种效果，现在又很多网站/APP都喜欢这种切换白天/黑夜模式。实现效果：设置2套或者多套色调模板，和之前的那种换皮肤大差不差。所以博客新主题也设置了这么一个效果，样式布局基本没怎么改变，后台设置页升级了一下，很多东西都不再“写死”，可以自由设置！白天模式效果：黑夜模式效果：感觉黑夜的色调比较好看。总体涉及到的原理： 1、设计2套或者多套CSS样式，可以在body里添加一个class，后面保留class/ID样式名称不变，在不同的样式里给设计一个区域，通过body里的class名调用不同的样式CSS。

笔记 2,439 5个月前

记一次网页源码顶部空白行的问题处理

正常来说，网页源码顶部如非UFT-8 bom编码的问题，基本不会影响网站的正常运行，但如php生成xml的话，就会出现问题。因更换了主题（新主题暂时未上线，只是测试），发现xml无法正常显示，查看源码，顶部多出了一行空白行，本地运行正常。查找原因，基本每个PHP问题都排查了，未发现任何问题，将主题上传到另外一个网站运行，发现正常。基本可以排除是主题的原因，剩下的可能是插件的问题。查看了插件的源码，发现真的是插件的问题，PHP插件文件底部多出了几行，删除多出的行，重新运行，空白行不见了！记录下，防止下次又因同样的原因而花时间去排查！

笔记 2,558 6个月前

wordpress禁用REST API导致古腾堡编辑器发布文章出错问题

wordpress禁用REST API，在function.php中加入以下代码： add_filter("json_enabled", "__return_false"); add_filter("json_jsonp_enabled", "__return_false"); add_filter("rest_enabled", "__return_false"); add_filter("rest_jsonp_enabled", "__return_false"); remove_action("init", "rest_api_init"); remove_action("rest_ap

笔记 1,402 6个月前

wordpress 后台主题设置选项按钮（button、input submit）点击屏蔽提交事件禁止刷新

wordpress 后台主题设置选项按钮（button、input submit）点击屏蔽提交事件禁止刷新如果在设计主题或者插件后台设置选项时，wordpress后台的按钮（button、input submit）默认是提交操作，如只是响应JS事件，需要屏蔽提交，防止页面刷新。e.preventDefault(); 完整示例： $("button.copy").on("click",function(e){ e.preventDefault(); JS操作 });

笔记 1,286 6个月前

零分杂记