关于li hover下拉的一些小问题讨论

最新推荐文章于 2022-07-22 17:15:00 发布

烟雨浥轻尘

最新推荐文章于 2022-07-22 17:15:00 发布

阅读量302

点赞数

本文链接：https://blog.csdn.net/qq_41430522/article/details/114461078

版权

本文介绍了使用CSS实现下拉菜单展开与收起的两种常见方法。第一种方法通过设置固定高度并利用`overflow:hidden`和`transition`实现高度变化的动画效果。第二种方法则通过初始隐藏内容，hover时改变子元素高度来展开菜单。文章详细讲解了这两种技术的实现细节和注意事项。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        /* 两种实现思路
        首先有两个问题,一个是display:block和display:none,无法做缓动
        一个是一个盒子如果有文字,高度设置为0,仍然看得到文字
        只要css设置了transition,那么再用css或者js改变属性也会有效果吗?
         /* 对了,ul里的ol的li为什么,我用了.fuck >li子元素选择器,但是
        还是每个ol的li那么高,还有字体颜色,原来是我在./css/index.css里
        给ul设置了100多的行高....,众所周知,行高和字体颜色是会继承..我还以为子元素
        选择器失效了, */


        /* 一种是这样的,ul下的li给固定高度,然后ul或者li设置 overflow: hidden;
        然后hover li的时候让这个li的高度变成下面几个ol的li的高度加本身ul li的高度就行了,
        不过这种要么纯css就一个个nth-of-type选中写死相应高度,有多少写多少高度,
        要么用js动态给高度,有几条数据动态给多少高度
        这种的效果是整个ol都是展开收起的动画 */


        .fuck>li {
            overflow: hidden;
            height: 100px;
            transition: height 0.5s linear;
        }

        .fuck>li:hover {
            height: 500px;
        }

        .fuck ol {
            width: 50px;
        }

        .fuck ol li {
            background: #ccc;
            float: none;
            line-height: 30px;
        }



        /* 一种是这样的,ul的li不写高度,不写死高度,高度就是默认auto的,随着内容撑开
        ,ul或者li设置 overflow: hidden;ol的li设置高度0
        然后hover li的时候让 ol的li高度变成30px,这样ol就被撑开了,有高度了,
        ul也会增加相应高度,高度对着内容撑开
        这种的效果是ol的li都是展开收起的动画 */




        /* .fuck {
            overflow: hidden;
        } */
        /* .fuck>li {
            overflow: hidden;
        }

        .fuck>li {
            color: red;
        }

        .fuck ol {
            width: 50px;
        }

        .fuck ol li {
            background: #ccc;
            line-height: 16px;
            height: 0;
            transition: all .2s;
        }

        .fuck>li:hover ol li {
            height: 30px;
        } */
    </style>
</head>

<body>
    <!-- head s-->
    <div class="head-con w">
        <h1 class="logo fl">
            <a href="#">
                <img src="./images/logo1.jpg" alt="">
            </a>
        </h1>
        <ul class="fuck fl">
            <li>
                <a href="#">首页</a>
                <ol>
                    <li>sdafsd</li>
                    <li>sdafsd</li>
                    <li>sdafsd</li>
                    <li>sdafsd</li>
                    <li>sdafsd</li>
                    <li>sdafsd</li>
                </ol>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
            <li>
                <a href="#">成功案例</a>
            </li>
        </ul>
        <div>
            010-85859518
        </div>
    </div>
    <!-- head e-->

    <!-- banner s -->
    <div id="banner">
        <div class="banner-con w"></div>
    </div>
    <!-- banner e -->

    <!-- design s -->
    <div class="design-con w">
        <ul>
            <li class="designactive">
                <a href="#">照明设计</a>
            </li>
            <li>
                <a href="#">照明设计</a>
            </li>
            <li>
                <a href="#">照明设计</a>
            </li>
            <li>
                <a href="#">照明设计</a>
            </li>
            <li>
                <a href="#">照明设计</a>
            </li>
        </ul>
        <img src="./images/banner2_03.jpg" alt="">
    </div>
    <!-- design e -->

    <!-- light s  928 -->
    <div class="light-con">
        <p>照明设计</p>
        <p>LIGHTING DESIGN</p>
        <p>
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
            文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
            文本文本文本文本文本文文本文文本文本文本文本文本文文本文本文本文本文本文本文本文本文本文本文本文本文本文本文
            文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
        </p>
        <div class="light_pic w">
            <div class="light_l fl">
                <img src="./images/picpart_03.jpg" alt="">
                <img src="./images/picpart_03.jpg" alt="">
                <img src="./images/picpart_03.jpg" alt="">
                <img src="./images/picpart_03.jpg" alt="">
            </div>
            <div class="light_c fl">
                <img src="./images/picpart_11.jpg" alt="">
                <img src="./images/picpart_11.jpg" alt="">
            </div>
            <div class="light_r fl">
                <img src="./images/picpart_05.jpg" alt="">
                <img src="./images/picpart_09.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- light e -->

    <!-- case s-->
    <div class="case-con w">
        <p>项目流程</p>
        <p>PROJECT PROGRESS</p>
        <img src="./images/case_03.jpg" alt="">
    </div>
    <!-- case e -->


    <!-- bottom s-->
    <div id="bottom">
        <div class="bottom-con w">
            <div class="bottom_l fl">
                <img src="./images/logo2.jpg" alt="">
                <p>北京市朝阳区 朝阳北路 大悦城北楼2905室</p>
                <p>北京市朝阳区 朝阳北路 大悦城北楼2905室</p>
                <p>北京市朝阳区 朝阳北路 大悦城北楼2905室</p>
                <p>北京市朝阳区 朝阳北路 大悦城北楼2905室</p>
                <p>北京市朝阳区 朝阳北路 大悦城北楼2905室</p>
            </div>
            <div class="bottom_r fl">
                <div class="br1 fl">
                    <div>
                        <p>全国服务热线</p>
                        <p>010-8585 9518</p>
                    </div>
                    <div>
                        <img src="./images/bg4.jpg" alt="">
                        <p>微信公众号</p>
                    </div>
                </div>
                <form class="br2 fr">
                    <p>留言 / leave a message</p>
                    <input type="text" value="姓名">
                    <input type="text" value="电话">
                    <input type="text" value="留言内容">
                    <input type="submit" value="提交">
                </form>
            </div>
        </div>
    </div>
    <!-- bottom s-->

    <div id="copyright">
        <div class="copyright-con w">&copy;1232a53sgd13as1dg53as1gd65as1</div>
    </div>
</body>

</html>