纯CSS实现展开列表

效果预览
纯CSS实现展开列表_第1张图片

以下为源码


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
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>1li>
                    <li>2li>
                    <li>3li>
                    <li>4li>
                ul>
            div>
        li>
        <li><div class="hiddenlist">
                <ul>
                    <li>1li>
                    <li>2li>
                    <li>3li>
                    <li>4li>
                ul>
            div>
        li>
        <li><div class="hiddenlist">
                <ul>
                    <li>1li>
                    <li>2li>
                    <li>3li>
                    <li>4li>
                ul>
            div>
        li>
    ul>
div>
<div style="clear:both;">因为hidden的position属性为fixed,所以不会影响布局div>
body>
html>

你可能感兴趣的:(CSS,CSS使用技巧摸索)