百度导航切换

最新推荐文章于 2019-12-30 11:11:35 发布

sujiao666

最新推荐文章于 2019-12-30 11:11:35 发布

阅读量375

点赞数

分类专栏：前端js 文章标签：导航隐藏切换百度

本文链接：https://blog.csdn.net/u013195452/article/details/52740544

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>

       #h{
           width: 100px;
           background: yellowgreen;
           text-align: center;
           margin: auto;
       }
       #box{
           width: 100px;
           height: 100px;
           background: pink;
           display: none;
       }
       #box ol {
           padding: 0;
           margin: 0;
           list-style: none;
           font-size: 14px;
           padding-top: 10px;
       }
       a{
           text-decoration: none;
       }
       #box ol li{
           text-align: center;
           margin-top: 0px;
           width: 100%;
           height: 26px;
           text-align: center;
           line-height: 26px;
       }
       li:hover{
           background: deepskyblue;
       }
       </style>
   </head>
   <body>
            <div>
              <div id="h">设置
               <div id="box">
                   <ol>
                       <li><a href="" >搜索设置</a></li>
                       <li><a href="" >高级设置</a></li>
                       <li><a href="" >搜索历史</a></li>

                   </ol>
               </div>
               </div>
           </div>

   </body>
   <script>
       var oBox = document.getElementById('box');
       var H = document.getElementById('h');
       H.onmouseover = function(){
           oBox.style.display = 'block';
       }
       H.onmouseout = function(){
           oBox.style.display = 'none';
       }
   </script>
</html>