search

AbrahimSA / Lateral-Menu-bootstrap-with-icon

Front end - Lateral Menu bootstrap with icon and submenu
0 stars 0 forks source link

Css3 file menu #1

Open AbrahimSA opened 7 years ago

AbrahimSA commented 7 years ago 

    <style type="text/css">
        body{
            padding: 0;
            margin:0;
        }
        .menu ul{
            list-style: none;
            margin:0;
            padding: 0;
        }
        .menu ul li{
            padding: 15px;
            position: relative;
            width: 250px;
            vertical-align:middle;
            background-color: #34495E;
            cursor:pointer;
            border-top:1px solid #BDC3C7;
        }

        .menu ul li:hover{
            background-color: #2ECC71;
        }
        .menu > ul > li{
            border-right: 5px solid#F1C40F;
        }
        .menu ul ul{
            transition: all 0.3s;
            opacity: 0;
            position:absolute;
            border-left:5px solid #F1C40F;
            visibility: hidden;
            left: 100%;
            top: -2;
        }

        .menu ul li:hover > ul {
            opacity: 1;
            visibility: visible;
        }

        .menu ul li a{
            color: #fff;
            text-decoration: none;
        }

        span{
            margin-right: 15px;
        }
        .menu > ul > li:nth-of-type(5)::after{
            content: "+";
            position: absolute;
            margin-left:25%;
            color: #fff;
            font-size:20px;
        }
    </style>
AbrahimSA commented 7 years ago
```
```