zoukankan      html  css  js  c++  java
  • js下拉框-4

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    body,ul,li{ margin:0; padding:0;}
    .box{ 400px; margin:50px auto;}
    .box li{ list-style:none; cursor:pointer;}
    .box ul{ float:left; 100px; margin-right:10px; text-align:center; height:30px; line-height:30px; background:#999;}
    .box ul li ul{ display:none; 100px; text-align:center; }
    .box li ul li{  background:#CCC;  height:30px; line-height:30px;}
    </style>
    <script>
    window.onload=function(){
          var box1, box2, box3;
              box1=document.getElementById('box1');
              box2=document.getElementById('box2');
              box3=document.getElementById('box3');
              box1.onmouseover=function(){
                  document.getElementById('list_1').style.display="block";
              };
               box1.onmouseout=function(){
                  document.getElementById('list_1').style.display="none";
              };
              
               box2.onmouseover=function(){
                  document.getElementById('list_2').style.display="block";
              };
               box2.onmouseout=function(){
                  document.getElementById('list_2').style.display="none";
              };
              
               box3.onmouseover=function(){
                  document.getElementById('list_3').style.display="block";
              };
               box3.onmouseout=function(){
                  document.getElementById('list_3').style.display="none";
              };
    };
    </script>
    </head>

    <body>
    <div class="box">
          <ul>
              <li id="box1"><a href="#" target="_blank">平面设计</a>
                  <ul id="list_1">
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                  </ul>
              </li>
          </ul>
           <ul>
              <li id="box2"><a href="#" target="_blank">平面设计</a>
                  <ul id="list_2">
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                  </ul>
              </li>
          </ul>
           <ul>
              <li id="box3"><a href="#" target="_blank">平面设计</a>
                  <ul id="list_3">
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                      <li><a href="#" target="_blank">平面设计</a></li>
                  </ul>
              </li>
          </ul>
          
    </div>
    </body>
    </html>

  • 相关阅读:
    js 生成m位随机数入门实例
    解决JS浮点数(小数)计算加减乘除的BUG
    JS 用sort方法排序字符串
    CSS3 transform rotate(旋转)锯齿的解决办法
    常用JS正则表达式
    Javascript 利用a标签自动解析URL分析网址实例
    移动前端头部标签(HTML5 head meta)
    JavaScript判断移动端及pc端访问不同的网站
    mysql 按日期分组
    css hover控制其他元素
  • 原文地址:https://www.cnblogs.com/su1637/p/8256845.html
Copyright © 2011-2022 走看看