js下拉菜单案例

最新推荐文章于 2024-09-02 08:59:04 发布

wamztkn

最新推荐文章于 2024-09-02 08:59:04 发布

阅读量683

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wamztkn/article/details/124095113

版权

今日学习了JavaScript技术，重点研究了如何运用JS创建交互式的下拉菜单，通过实例加深了对JavaScript动态效果理解。

摘要由CSDN通过智能技术生成

打卡一下，今天学习了js的下拉菜单的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单案例</title>
    <!-- 思路：1、用li制作下拉菜单效果，大的ul命名为Nav，li里面包含了一个a和一个ul。ul里面有 
      三个小li
			 2、a是要变成块级元素，ul定位在a的下面
			 3、获取nav中的li
			 4、使用循环所有的li，给li添加鼠标事件
			   当鼠标经过li 里面的 第二个孩子 ul 显示， 当鼠标离开，则ul 隐藏-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
            box-sizing: border-box;
            border: 1px solid #f696fe;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {