zoukankan      html  css  js  c++  java
  • 9.各种下拉菜单

    https://www.imooc.com/learn/12

    出现的问题:点击删除后广告display:none;高度消失;这是二级菜单绝对定位要给主要父元素定位relative

    效果:

    应用 :css+html

    难点:因为a标签的特殊性所以,必须对a进行display:block; padding的设定来规范尺寸;否则li a 各自为政效果范围不同意;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        *{margin:0;padding:0}
        ul,li{list-style:none;}
        a{text-decoration:none;color:#333;}

        .nav{
            600px;
            height:40px;
            margin:0 auto;
            background:#eee;
        }
        .nav-ul li{
            float:left;
            text-align:center;  /*为二级标题准备*/
            line-height:40px;
        }
        .nav-ul li a{
            display:block;
            padding:0 10px;
        }
        .nav-ul li a:hover{
            color:#fff;
            background:#999;
        }
        /*二级标题*/
        .nav-ul li ul{
            position:absolute;
            top:40px;
            display:none;
        }
        .nav-ul li ul li{
            float:none;
            margin-top:2px;
            background:#eee;
        }
        .nav-ul li ul li a:hover{
            background:lightblue;
        }
        .nav-ul li:hover ul{
            display:block;
        }
    </style>
    <body>
        <div class="nav">
            <ul class="nav-ul">
                <li><a href="">选1项</a></li>
                <li><a href="">秒杀</a></li>
                <li>
                    <a href="">优惠劵</a>
                    <ul>
                        <li><a href="">选项1</a></li>
                        <li><a href="">选项2(加长)</a></li>
                        <li><a href="">选项3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="">购物</a>
                    <ul>
                        <li><a href="">选项1</a></li>
                        <li><a href="">选项2(加长)</a></li>
                        <li><a href="">选项3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div style="100px;height:100px;border:1px solid ;"></div>
    </body>
    </html>
     
    第二种:js显示隐藏
      <li onmouseover="show(this)" onmouseout="hide(this)">  
      <script>    
            function show(li){
                var getli=li.getElementsByTagName("ul")[0];
                getli.style.display="block";
                console.log(getli);
            }
            function hide(li){
                var getli=li.getElementsByTagName("ul")[0];
                getli.style.display="none";
            }
            // 选择器获取
            // document.querySelectorAll  
            // document.querySelector
            
        </script>

     

  • 相关阅读:
    js重要函数
    js判断是否为空
    checkbox选择框如果被选中value值就可以传过去,没有被选中value就不能穿过去(调试了近一天,坑爹的说)
    js常用点
    常用jdbc操作
    java.sql.SQLException: 索引中丢失 IN 或 OUT 参数:: 1
    com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException: 3 字节的 UTF-8 序列的字节 2 无效 待整理
    OOAD和UML
    .net 外部CSS文件不起作用总结
    线程读书笔记
  • 原文地址:https://www.cnblogs.com/stone5/p/9122022.html
Copyright © 2011-2022 走看看