HTML+CSS+JavaScript实现下拉菜单效果

实现思路：

HTML 方面，导航栏的每个 <li> 元素里面包含 <a> 和 <ul> ，将 <li> 设置为相对定位，将 <ul> 设置为绝对定位，并将 <ul> 的 display 属性设置为 none 。通过 js 给导航栏的每个 <li> 添加事件监听器，当鼠标覆盖 <li> 时，令 <ul> 的 display 属性值为 block；当鼠标离开 <li> 时，令 <ul> 的 display 属性值为 none；

效果演示：

源代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>下拉菜单</title><style>   * {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #ffb900;}a {cursor: default;text-decoration: none;font-size: 20px;font-weight: 700;color: #fff;letter-spacing: 3px;}li {list-style: none;cursor: default;}.container {position: absolute;top: 30%;left:50%;transform: translate(-50%, -50%);box-shadow: 0 10px 10px rgba(10, 20, 20, .20), 0 0 10px rgba(10, 20, 20, .20);font-size: 0;}.container .nav {display: inline-block;position: relative;width: 150px;height: 50px;background-color: #505050;text-align: center;line-height: 50px;}.container .nav:hover {background-color: #3e3e3e;}.container .nav ul {display: none;position: absolute;top: 50px;width: 100%;box-shadow: 0 10px 10px rgba(10, 20, 20, .20), 0 0 10px rgba(10, 20, 20, .20);background-color: #fff;text-align: center;}.container .nav ul li a {display: block;color: #505050;}.container .nav ul li a:hover {background-color: #e1e1e1;}</style>
</head>
<body><ul class="container"><li class="nav"><a href="#">水果</a><ul><li><a href="#">西瓜</a></li><li><a href="#">香蕉</a></li><li><a href="#">哈密瓜</a></li><li><a href="#">橙子</a></li></ul></li><li class="nav"><a href="#">蔬菜</a><ul><li><a href="#">西红柿</a></li><li><a href="#">土豆</a></li><li><a href="#">小白菜</a></li><li><a href="#">黄花菜</a></li></ul></li><li class="nav"><a href="#">酒水</a><ul><li><a href="#">啤酒</a></li><li><a href="#">橙汁</a></li><li><a href="#">可乐</a></li><li><a href="#">雪碧</a></li></ul></li><li class="nav"><a href="#">零食</a><ul><li><a href="#">饼干</a></li><li><a href="#">面包</a></li><li><a href="#">辣条</a></li><li><a href="#">沙琪玛</a></li></ul></li></ul><script>let nav = document.querySelectorAll('.nav');for(let i=0; i<nav.length; i++) {nav[i].addEventListener('mouseover', function() {this.children[1].style.display = "block";});nav[i].addEventListener('mouseout', function() {this.children[1].style.display = "none";});}</script>
</body>
</html>

HTML+CSS+JavaScript实现下拉菜单效果相关推荐

html下拉列表插件,js+CSS实现模拟华丽的select控件下拉菜单效果
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个 ...
HTML下拉菜单为什么是灰的,CSS实现的灰色下拉菜单效果代码
本文实例讲述了CSS实现的灰色下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的灰色下拉菜单,支持二级的导航菜单,如果不喜欢灰色的话,颜色你自己调整下,完善后效果是相当不错的 ...
html hover效果下拉个框,CSS实现Hover下拉菜单的方法
老规矩,今天来讲一个很实用的css效果,当鼠标移到按钮的时候就会自动显示下拉菜单.效果如下: 很简单的一个小demo,实现步骤如下: 首先定义一个大的div包裹一个button和一个a链接组分别设置d ...
简单下拉菜单html,JavaScript简单下拉菜单实例代码
本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最 ...
用Javascrip写出selelct下拉菜单效果
用Javascrip写出selelct下拉菜单效果话不多说,先上效果图: html代码: <p>2.模拟selelct下拉菜单</p><div class=" ...
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
css实现列表下拉菜单 by David Piepgrass 由David Piepgrass 逐行:点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS t ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
用jQuery实现下拉菜单效果
用jQuery实现下拉菜单效果下拉菜单效果展示代码 <!DOCTYPE html> <html><head>`在这里插入代码片`<meta charset ...
html下拉菜单隐藏属性,css修改selec下拉菜单样式
css修改selec下拉菜单样式2018-01-19 15:00 修改select下拉菜单样式其实可以使用javascript来操作,这样更方便. 但有些人并不喜欢,想用单纯的css来控制. 以下有三 ...

HTML+CSS+JavaScript实现下拉菜单效果

HTML+CSS+JavaScript实现下拉菜单效果相关推荐

最新文章

热门文章