纯CSS实现展开列表

最新推荐文章于 2024-08-22 11:20:46 发布

原创最新推荐文章于 2024-08-22 11:20:46 发布 · 6.1k 阅读

2 ·

CC 4.0 BY-SA版权

觉得有帮助到你的话，请点个赞关注我吧！

文章标签：

#CSS #动画

CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

CSS使用技巧摸索

13 篇文章

订阅专栏

效果预览
这里写图片描述

以下为源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
*{
    padding:0;
    margin:0
}
.menu>li{
    float:left;
    width:80px;
    background:#0ff;
    list-style:none;
    text-align: center;     
}
.menu>li:hover .hiddenlist{
    height:100px;
}
.menu>li:hover{
    background:#707;
}
.hiddenlist{
    position:fixed;
    height:0;
    overflow:hidden;
    background:#999;
    transition:height 0.5s ;
}
.hiddenlist ul{
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80px;
}
.hiddenlist ul li{
    text-align:center;
}
.hiddenlist li:hover {
    background:#7fff;
}
@keyframes move{
    0% {height: 0 }
    100% {height: 120px}
}
</style>
<body>
<div class="nav">
    <ul class="menu">
        <li>一
            <div class="hiddenlist">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </li>
        <li>二
            <div class="hiddenlist">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </li>
        <li>三
            <div class="hiddenlist">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>
        </li>
    </ul>
</div>
<div style="clear:both;">因为hidden的position属性为fixed，所以不会影响布局</div>
</body>
</html>