展示效果：

css代码：

<style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        /*给a标签设置颜色和文本装饰*/
        a {
            color : #bbb;
            text-decoration: none;
        }
        /*给#nav主导航设置背景色，高度，行内字体高度*/
        #nav {
            background-color:red;
            height:50px;
            line-height:50px;
        }
       /*设置所有li的样式*/
        li{
            list-style:none;
            margin:0 10px;
            float:left;
        }
        /*设置#nav的子元素的子元素a标签鼠标在导航菜单上悬浮时的效果*/
        #nav > li > a:hover {
            color:white;
        }
        /*主导航相对于它的父级#nav定位*/
         #nav > li {
             position:relative;
         }
         /*设置#nav子元素的子元素，子菜单的定位因为#nav>li时定位了，所以会依照#nav>li的定位进行定位*/
         #nav > li > ul {
             position:absolute;
             top:50px;
             width:180px;
             border:1px solid #aaa;
             border-top:none
         }
        /*设置子菜单里a标签的样式*/
         #nav > li >ul > li a{
             display:inline-block;
             height:50px;
             color:#444;
         }
        /*初始时子菜单不显示*/
         #nav>li>ul{
             display:none;
         }
    </style>

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>  
</head>
<body>
    <ul id="nav">
        <li><a href="">首页</a></li>
        <li><a href="">视频教程</a></li>
        <li>
            <a href="">资源下载</a>
            <ul>
                <li><a href="">PHP工具</a></li>
                <li><a href="">在线手册</a></li>
                <li><a href="">学习课件</a></li>
                <li><a href="">网站源码</a></li>
            </ul>
        </li>
        <li><a href="">社区问答</a></li>
        <li>
            <a href="">技术文章</a>
            <ul>
                <li><a href="">头条</a></li>
                <li><a href="">博客</a></li>
                <li><a href="">PHP教程</a></li>
                <li><a href="">PHP框架</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

js代码：

<script>
    //获取所有的主导航 "#nav>li"表示这个类的子元素，不包含子元素的下级子元素
    const navs = document.querySelectorAll("#nav > 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";
        }
    }
    //关掉子菜单   判断有没有子菜单，同时满足有a标签的
    function closeSubMenu(ev){
        if(ev.target.nodeName ==="A" && ev.target.style.nextElementSibling !==null){
            ev.target.nextElementSibling.style.display = "none";
        }
    }
</script>

导航及下拉菜单

展示效果：

css代码：

html代码：

js代码：

相关文章