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;
        
    }
    .subMenu a:before{
        content: '';
        opacity: 0;
        transition: opacity 0.3s;
    
    }
    .subMenu a:hover:before{
        content: '';
        position: absolute;
        height: 0;
        width: 6px;
        left: 0;
        top:0;
        opacity: 1;
        /* background-color: #d8d824; */
        border-top: 24px solid transparent;
        border-left: 11px solid #fcdc29;
        border-bottom: 24px solid transparent;
    }
    .subMenu a:after{
        content: '';
        opacity: 0;
        transition: opacity 0.3s;
    
    }
    .subMenu a:hover:after{
        content: '';
        position: absolute;
        height: 0;
        width: 6px;
        right: 0px;
        top:0;
        opacity: 1;
        /* background-color: #d8d824; */
        borde.........完整代码请登录后点击上方下载按钮下载查看