<nav class="nav2b">
    <a href="#" class="logo">Logo</a>
    <input type="checkbox" id="toggler">
    <label for="toggler"><i class="fas fa-list"></i></label>
    <div class="menu">
        <ul class="dropdown-content">
            <li><a href="../index.html">Home</a></li>
            <li><a href="#">Front-End <i class="fa fas fa-angle-down"></i></a>
                <ul class="sub-menus animated flipInX">
                    <li><a href="./HTML.html">HTML5</a></li>
                    <li><a href="./CSS3.html">CSS3</a></li>
                    <li><a href="#">JAVASCRIPT</a></li>
                </ul>
                </li>
            <li><a href="#">Back-End <i class="fa fas fa-angle-down"></i></a>
                <ul class="sub-menus animated flipInX">
                    <li><a href="#PHP">PHP</a></li>
                    <li><a href="#ASP">ASP</a></li>
                </ul>
            </li>
            <li><a href="#Library" class="nav-link">Library</a></li>
            <li><a href="#Activites" class="nav-link">Live video</a></li>
            <li><a href="#contact" class="nav-link">Contact</a></li>
            <li><a href="#About" class="nav-link">About us</a></li>
        </ul>
    </div>
</nav>
                        

                                            
    body{
        display: block;
        position: relative;
        --bs-body-bg: #121230;
        background:var(--bs-body-bg);
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
    /* start nav-bar-3 on header */
    .nav2b{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        background-color: aliceblue;
        padding-right: 20px;
        padding-left: 20px;
        height: 40px;
        position: sticky;
        top: 15px;
        z-index: 2;
    }
    .menu{
        height: 100%;
    }
    .nav2b a{
        text-decoration: none;
        color: inherit;
    }
    .logo{
        margin-right: 50px;
    }
    .dropdown-content{
        margin-block-end: 0;
        padding-inline-start: 13px;
        margin-block-start: 10px;
        display: flex;
        list-style: none;
        gap: 25px;
    }
    .dropdown li{
    display: inline;
    list-style: none;
    float: right;
    font-weight: bold;
    padding: 10px; 
    border-radius: 5px;
    }
    .dropdown li a{
    text-decoration: none; 
    font-size: 16px;
    font-weight: 600;
    color: #1e87f0;
    margin-top: 5px;
    margin-left: 15px;
    padding:5px;
    }
    .dropdown li a:hover{
    border-bottom-color: #1e33f0 ;
    border-bottom-style:solid;
    z-index: 999; 
    }
    .sub-menus{
    height: auto;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    border-radius: 5px;
    box-shadow: -4px -4px 10px #00000018;
    backdrop-filter: blur(20px);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    background-color: rgb(22 22 23 /80%);
    display: none;
    width: 110px;
    padding-left: 0px;
    margin: 0px 0px 0px 0px;
    }
    .sub-menus li { 
    width: 100%;
    }
    .sub-menus a {
    display: flex;
    color: #FFFFFF;
    font-size: 16px;
    justify-content: center;
    padding: 0.5rem 1rem;
    }
    li:hover .sub-menus {
    display: block;
    }
    .sub-menus a:hover{
    background: #F2F2F2;
    color: #444444;
    transition: 0.6s all ease-in-out;
    }
    #toggler,.nav2b label{
    display: none;
    }
    @media only screen and (max-width: 900px){
        .nav2b{
            padding-top: 15px;
            height: 35px;
        }
    .menu{
        height: auto;
        width: 100%;
        opacity: 0;
        transition: all 0.5s ease-in;
        background-color: #121230;
        color: #FFFFFF;
        margin-top: 20px;
    }
    .dropdown-content{
        flex-direction: column;
        align-items: center;
        transition: all 0.5s ease-in;
        padding: 20px;
    }
    .nav2b label{
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    #toggler:checked ~ .menu{
        opacity: 1;
    }
    }