css实现精美手风琴二级菜单效果代码-html代码-BFW代码库

css实现精美手风琴二级菜单效果代码

代码语言：html

代码描述：css实现精美手风琴二级菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">

    <style>
        @charset "utf-8";
    *{
        margin: 0;
        padding: 0;
        font-family: 'lato';
        list-style: none;
        text-decoration: none;
    }
    body{
        background-color: #fcdc29;
    }
    
    .wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .mainMenu{
        width: 250px;
        display: block;
        border-radius: 10px;
        overflow: hidden;
    }
    .item{
        border-top: 1px solid #ef584a;
        overflow: hidden;
    }
    .btn{
        display: block;
        padding: 15px 20px;
        background-color: #ff6f61;
        color: #fff;
        position: relative;
    
    }
    .btn:before{
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right:8px solid transparent;
        border-top:10px solid #ff6f61;
        right: 15px;
        bottom: -10px;
        z-index: 9;
        
    }
    .btn i {
        margin-right: 10px;
    }
    .subMenu{
        background: #273057;
        overflow: hidden;
        transition: max-height 0.7s;
        max-height: 0;
    }
    .subMenu a{
        display: block;
        padding: 15px 20px;
        color: #fff;
        font-size: 14px;
        border-bottom: 1px solid #394c7f;
        position: relative;
.........完整代码请登录后点击上方下载按钮下载查看