Html中鼠标悬停显示二级菜单的两种方法

最新推荐文章于 2025-10-17 15:54:58 发布
原创 最新推荐文章于 2025-10-17 15:54:58 发布 · 2.8w 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了两种使用HTML和CSS创建下拉菜单的方法。第一种方法通过JavaScript控制菜单项的显示与隐藏；第二种方法则利用CSS的hover属性实现类似效果。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. ul{
  8. list-style: none;
  9. float: left;
  10. }
  11. li{
  12. display: none;
  13. }
  15. </style>
  16. <script type="text/javascript">
  17. function disp(){
  18. for(var i = 0; i<3; i++){
  19. document.getElementsByClassName('sss')[i].style.display='block';
  20. }
  22. }
  23. function out(){
  24. for(var i = 0; i<3; i++){
  25. document.getElementsByClassName('sss')[i].style.display='none';
  26. }
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <ul onmouseover="disp()" onmouseout="out()"> 手机数码
  32. <li class="sss">iPhone</li>
  33. <li class="sss">SAMSUNG</li>
  34. <li class="sss">SAMSUNG</li>
  35. </ul>
  36. </body>
  37. </html>
 
方法二
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. li:hover #b{
  8. display: block;
  9. }
  10. #b{
  11. display: none;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <ul>
  17. <li>sss
  18. <ul id="b">
  19. <li ></li>
  20. <li ></li>
  21. <li ></li>
  22. <li ></li>
  23. </ul>
  24. </li>
  25. </ul>
  26. </body>
  27. </html>
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
🏆 前端领域优质创作者
10-12 2万+
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单），HTML css3菜单鼠标移入显示下方二级菜单，用纯CSS实现鼠标经过后出现下拉菜单，css实现网页中鼠标移入出现下拉框，用纯CSS实现鼠标经过后出现下拉菜单，鼠标移动下拉菜单(下拉菜单之纯CSS实现方法) 鼠标悬停显示下拉菜单，html鼠标悬停下拉列表，CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程，官方教程。hover菜单时显示隐藏的div盒子，里面有二级菜单。
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Golden的专栏
10-27 1716
<html> <head> <title>Js弹出浮动窗口，支持鼠标拖动和关闭</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /** 关于一些参数说明： *bodycontent:要在窗口显示的内容，dom对象 *title:窗口标题，字符串类型
鼠标悬停显示二级菜单HTML+CSS
不知名
11-27 3108
鼠标悬停显示二级菜单HTML+CSS
原生JavaScript实现鼠标悬停显示二级菜单特效
最新发布
weixin_28235889的博客
10-17 687
随着菜单层级加深（如三级、四级），类名命名混乱将成为维护瓶颈。为此需制定统一的 BEM（Block Element Modifier）命名规范，确保结构清晰、易于扩展。推荐命名规则如下：Block（块）：.menuElement（元素）：Modifier（修饰符）：同时，为便于 JavaScript 控制，建议添加data-*自定义属性来标记状态或配置参数：产品</a>-- 子菜单项 --></ul></li>数据属性含义使用场景。
html中向上的菜单怎么写,使用HTML+CSS实现鼠标划过的二级菜单栏的示例
weixin_39930671的博客
05-30 601
本文介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例，分享给大家，具体如下：先上效果图：1、鼠标没在上面2、鼠标放在一级菜单上，展开二级菜单3、鼠标放在二级菜单上代码：二级菜单测试/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------菜单css代码----------begin---------- */....
php点击菜单显示内容,js二级菜单点击后显示其中内容功能
weixin_39609407的博客
03-20 270
这次给大家带来js二级菜单点击后显示其中内容功能，js二级菜单点击后显示其中内容的注意事项有哪些，下面就是实战案例，一起来看一下。最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且html布局并不是父子级关系，具体请看效果图如下html结构入下您好！日期滚球今日赛事早盘更改密码密码恢复账户历史|交易状况足球|篮球/美式足球|网球|排球|羽毛球|乒乓球|棒球|斯诺克/台球|其...
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
热门推荐
nO0b
09-25 1万+
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单 效果图:     一级菜单:   鼠标停留时的二级菜:   三级: 有一个小技巧效果就是二级菜单出现时 , 一级菜单的右边框 消失,和二级菜单连起来 , 其实是二级菜单的大div下加了一个白块div, 调整pos...
Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创
11-23
2. 当鼠标移动到二级菜单上时，顶级菜单的高亮样式会消失，影响用户体验。 接下来，我们介绍第二种方法，利用jQuery来实现更灵活的控制。这种方法可以保留Bootstrap的原有行为，同时解决第一种方法中的问题。首先，...
Bootstrap 中下拉菜单修改成鼠标悬停直接显示 <font color=red>原创</font>
09-02
Bootstrap的下拉菜单默认使用JavaScript事件来控制其可见性，但我们可以覆盖这些默认设置，使得在鼠标悬停时显示二级菜单。 ```css .nav > li:hover .dropdown-menu { display: block; } ``` 将这段代码添加到...
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
10-23
比如，在鼠标悬停效果中，当鼠标移动到父节点（一级主菜单）上时，就可以通过遍历找到对应的子节点（二级分类菜单），并将其显示出来。 接下来，我们将具体分析如何实现一个类似新浪游戏频道的悬停菜单效果。首先...
CSS+JS实现鼠标悬停显示二维码与二级菜单
“CSS+JS鼠标经过显示二维码和二级菜单特效”是一种典型的前端交互设计实现，结合了CSS3与JavaScript两大核心技术，旨在通过鼠标悬停（hover）事件触发动态视觉反馈，提升用户在网页浏览过程中的体验感与操作效率。...
HTML5 CSS3 鼠标悬停动画展开的二级菜单.rar
07-10
HTML5 CSS3 鼠标悬停动画展开的二级菜单，把你的鼠标放在菜单上，就可看到子菜单展开的动画效果了，十分好看漂亮。
鼠标移到菜单上弹出二级菜单特效
04-12
鼠标移到菜单上弹出二级菜单特效,利用timeout原来，以及 mouseout 和 mousehover 的先后原来。 只是一个简单 demo，未做其他处理。
jQuery鼠标悬停展开3d二级菜单动画特效源码.zip
11-19
在网页的导航菜单中，当鼠标悬停在一级菜单项上时，二级菜单以3D效果展开，为用户提供一种视觉上的层次感和立体感，使得网站的导航更加生动且易于操作。 这个源码的核心知识点主要包括以下几个方面： 1. **jQuery...
二级导航--鼠标悬浮菜单出现二级菜单
飞翔的熊blabla
08-28 3765
二级导航–鼠标悬浮菜单出现二级菜单 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head &gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标悬浮菜单出现二级菜单&lt;/title &gt; &lt;style&gt; a{ color: #fff; text-dec
html导航栏制作css伪类,利用:hover伪类制作二级导航菜单
weixin_39641334的博客
06-22 607
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*重置所有元素的三个样式为零，一般不推荐这样使用，但是我测试一般这么写*/* {margin:0; padding:0; border:0;}a {text-decoration:none; color:#000;}body {font-size:12px; font-family:"微软雅黑";}ul,ol {list-style:none;}ul ...
html鼠标悬停二级菜单视频,如何利用HTML做出鼠标划过的二级菜单栏（实例源码）...
weixin_35054319的博客
06-03 922
本篇文章主要介绍了如何利用HTML做出鼠标划过的二级菜单栏(实例源码)，对做网站很有帮助，需要的朋友可以参考下，并且把实例源码分享给大家，具体如下：先上效果图：1、鼠标没在上面2、鼠标放在一级菜单上，展开二级菜单3、鼠标放在二级菜单上实例源码如下：二级菜单测试/*为了使菜单居中*/body {padding-top:100px;text-align:center;}/* -------------...
html实现鼠标划过弹出二级菜单demo
HardProgrammer的博客
01-08 1810
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
html鼠标点击显示二级菜单内容,js实现二级菜单点击显示当前内容效果
weixin_35513122的博客
06-04 1218
最近做了一个二级菜单点击事件的效果，一级菜单有3个，二级菜单是固定的，而且html布局并不是父子级关系，具体请看效果图如下html结构入下您好！日期滚球今日赛事早盘更改密码密码恢复账户历史|交易状况足球|篮球/美式足球|网球|排球|羽毛球|乒乓球|棒球|斯诺克/台球|其他css样式我这里就不一一罗列了，根据你自己页面需求自己设计下面是重要内容jsfunction allGame() {var li...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值