收藏
WJ批改状态：合格
老师批语：效果实现了，建议再加些文字描述和效果图，这样更能加深对知识点的理解！
<html><head><style>.dh {margin: 0 auto;height: 50px;width: 1400px;}.dh li {list-style-type: none; /* 去掉li前的点 */float: left; /*将li设置成做浮动，变为联动*/}.dh a {display: block; /*将a变成块状*/width: 100px; /*设置块的宽度*/height: 50px; /*设置块的长度*/font-family: Microsoft Yahei;line-height: 50px; /*设置字体在块中的高度*/background-color: #2f4f4f;margin: 0px 0px; /*块里的高宽通过margin设置*/color: #fff;text-align: center; /*字体居中*/text-decoration: none; /*去掉下划线*/font-size: 15px;}.dh a:hover {background-color: #2f6f4f;}li > dl {margin-top: 10px;position: absolute;width: 200px;height: auto;background-color: lime;display:none;}dl > dd {margin-left: 0px;width: 100px;height: 50px;float: left;background-color: mediumslateblue;}</style></head><body><div class="dh"><ul id="nav"><li><a href="">首页</a><dl><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd></dl></li><li><a href="">摄像技巧</a></li><li><a href="">标准摄像配置</a></li><li><a href="">摄像教程</a></li><li><a href="">摄像作品</a></li><li><a href="">摄像作品上传</a><dl><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd></dl></li><li><a href="">汽车</a></li><li><a href="">影赛</a></li><li><a href="">论坛</a><dl><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd><dd><a href="">二级菜单</a></dd></dl></li></ul></div><script type="text/javascript">//获取有navid的元素下的所有livar navs = document.querySelectorAll("#nav > li");//用forEach循环遍历所有的li标签，并且为其添加事件监听器navs.forEach(function (nav) {nav.addEventListener("mouseover", showSubMenu);nav.addEventListener("mouseout", closeSubMenu);})function showSubMenu(ev) {if (ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "block";}}function closeSubMenu(ev) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}</script></bdoy></html>以上就是下拉菜单的css样式与js的编写代码！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
