导航菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
       margin: 0px;
       padding: 0px;
   }
   a
   {
       color: #fff;
       text-decoration: none;
   }
   #nav {width: 100%;
      height: 50px;
      line-height: 50px;
      background: #000;
   }
   li {
       float: left;
       margin-left: 10px;
       list-style: none;
   }
   #nav > li > a:hover
   {
       color: #F00;
   }
   #nav > li {
       position: relative;
   }
   #nav > li > ul
   {
       position: absolute;
       top:50px;
       width: 180px;
       border: 1px solid #bbb;
       border-top:none;
   }
   #nav > li > ul > li a 
   {
       display: inline-block;
       height: 50px;
       color: steelblue;
   }
   ul.sub li:hover
   {
       background-color: violet;
   }
   #nav > li > ul{
    display: none;
   }
</style>
<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>
<script>
    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";
          }
    }
    function closeSubMenu(ev)
    {
      if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) 
      {
        ev.target.nextElementSibling.style.display = "none";
      }
    }
</script>
</html>
相关文章
