百度导航切换

来源：互联网发布：电脑p图软件有什么软件编辑：程序博客网时间：2024/06/12 20:08

<!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>

0 0