如何写一个简单的鼠标滑动过的二级菜单
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <style type="text/css" > 9 .menu{ 10 margin:0px auto; 11 width:404px; 12 height:21px; 13 } 14 .menu ul{ 15 margin:0px; 16 padding:0px; 17 } 18 .menu ul li{ 19 position:relative; 20 float:left; 21 list-style:none; 22 padding:2px; 23 border:1px dotted; 24 font-size:14px; 25 width:95px; 26 text-align: center; 27 margin:0px; 28 background:#999999; 29 } 30 .menu ul li ul{ 31 display:none; 32 } 33 .menu ul li:hover ul{ 34 display:block; 35 position: absolute; left: 0px; top: 21px; 36 } 37 </style> 38 <body> 39 <p>下面是一个导航条</p> 40 <div class="menu"> 41 <ul> 42 <li><a href="#">首页</a></li> 43 <li> 44 <a href="#">新闻中心</a> 45 <ul> 46 <li><a href="1#">新手入门</a></li> 47 <li><a href="2#">视频教程</a></li> 48 <li><a href="3#">常见问题</a></li> 49 </ul> 50 </li> 51 <li> 52 <a href="#">学习课程</a> 53 <ul> 54 <li><a href="1#">新手入门</a></li> 55 <li><a href="2#">视频教程</a></li> 56 <li><a href="3#">常见问题</a></li> 57 </ul> 58 </li> 59 <li><a href="#">联系我们</a></li> 60 </ul> 61 </div> 62 </body> 63 </html>
分类:
杀鸡要用宰牛刀
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战