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

    <!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>
    function show(idName){
         document.getElementById(idName).style.display='block';
    };
    function heid(idNames){
         document.getElementById(idNames).style.display='none';
    };
    </script>
    </head>

    <body>
    <div class="box">
          <ul>
              <li onMouseOver="show('list_1')" onMouseOut="heid('list_1')"><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 onMouseOver="show('list_2')" onMouseOut="heid('list_2')"><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 onMouseOver="show('list_3')" onMouseOut="heid('list_3')"><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>

  • 相关阅读:
    Linux curl命令详解
    drools 7 日期时间段校验
    java程序员常用查询和学习的网站
    springboot+mybatis+分页插件的使用
    Vue. 之 替换 左上角 title标签处的图标
    Github访问速度很慢的原因,以及解决方法
    vue插件总结——总有你能用上的插件
    在Java中如何高效的判断数组中是否包含某个元素
    解决vue刷新页面以后丢失store的数据
    vue路由跳转时组件data数据刷新
  • 原文地址:https://www.cnblogs.com/su1637/p/8252655.html
Copyright © 2011-2022 走看看