Menu bar and submenu code

 <html>


<head>
    <title>MenuBar and SubMenu</title>

    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Borel&family=Bricolage+Grotesque&family=Pacifico&family=Poppins&family=Preahvihear&family=Raleway:wght@300&family=Roboto:wght@100;300;400;500;600&family=Rubik:wght@300;400&family=Ubuntu:wght@500&display=swap');

        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
            font-family: roboto;
        }

        body{
            background-color: #000000;
        }

        .main {
            width: 90%;
            height: 162px;
            margin: 30px auto;
            margin-bottom: 0px;
        }

        .menu-ul {
            background-color: #ffffff56;
            list-style: none;
            display: flex;
            justify-content: space-between;
            border-radius: 5px;
        }

        .menu-ul-li {
            color: #e8e8e8;
            font-size: 18px;
            font-weight: 500;
            padding: 10px 50px;
            position: relative;
            cursor: pointer;
        }

        .menu-ul-li:hover{
            opacity: .8;
        }


        .menu-ul>li:nth-child(3) {
            display: flex;
        }

        .menu-ul>li:nth-child(3) div {
            position: relative;
        }

        .menu-ul>li:nth-child(3) div span {
            position: absolute;
        }

        .expand_less {
            display: none;
        }

        .menu-ul-li:hover .expand_more {
            display: none;
        }

        .menu-ul-li:hover .expand_less {
            display: block;
        }

        /* submenu css start  */

        .submenu-slide-box {
            width: 100%;
            height: 120px;
        }

        .submenu-ul {
            list-style: none;
            width: 156.81px;
            /* background-color: #474747; */
            background-color: #ffffff56;
            border-radius: 0px 0px 5px 5px;
            position: absolute;
            top: -1000%;
            left: 0%;
            transition: 0.5s;
        }

        .menu-ul-li:hover .submenu-ul {
            top: 100%;
        }

        .submenu-ul-li {
            color: #fff;
            font-size: 16px;
            font-weight: 400;
            padding: 10px 50px;
            cursor: pointer;
            border-bottom: 1px solid #6d6d6d;
        }

        .submenu-ul-li:last-child{
            border-bottom: 0px;
            border-radius: 0px 0px 5px 5px;
        }

        .submenu-ul-li:hover {
            background-color: #676767;
        }
    </style>
</head>

<body>
    <div class="main">
        <ul class="menu-ul">
            <li class="menu-ul-li">Home</li>
            <li class="menu-ul-li">About us</li>
            <li class="menu-ul-li">Course
                <div>

                    <span class="material-symbols-outlined span-expand expand_more">
                        expand_more
                    </span>

                    <span class="material-symbols-outlined span-expand expand_less">
                        expand_less
                    </span>
                </div>

                <ul class="submenu-ul">
                    <li class="submenu-ul-li">HTML</li>
                    <li class="submenu-ul-li">CSS </li>
                    <li class="submenu-ul-li">JavaScript</li>
                </ul>

            </li>
            <li class="menu-ul-li">Library</li>
            <li class="menu-ul-li">Gallery</li>
            <li class="menu-ul-li">Contact</li>
        </ul>

        <div class="submenu-slide-box">

        </div>

    </div>


</body>

</html>

कोई टिप्पणी नहीं

सदस्यता लें संदेश ( Atom )
Blogger द्वारा संचालित.