scss 布尔玛导航下拉列表

Posted 2021-05-18

.has-dropdown {
    display: relative;

    .dropdown {
        display: none;
        position: absolute;
        background-color: $white-bis;
        padding: 14px;
        border: 1px solid $grey-lighter;
        border-radius: $radius;
        margin-right: 0;
        margin-left: 12px;

        a {
            display: block;
            text-align: left;
            color: $text-light;

            &:hover {
                color: $text-strong;
            }
        }
    }

    a.nav-item {
        height: 52px;
    }

    &:hover .dropdown {
        display: block;
    }

    &.is-rtl {
        direction: rtl;

        .dropdown {
            margin-right: 12px;
            margin-left: 0;

            a {
                text-align: right;
            }
        }
    }
}

// <div class="nav-right nav-menu">
//     <div class="has-dropdown is-rtl">
//         <a class="nav-item" href="#">Admin</a>

//         <div class="dropdown">
//             <a href="#">Accounts</a>
//             <a href="#">Projects</a>
//             <a href="#">Users</a>
//         </div>
//     </div>
// </div>