سلام تمرین جلسه 9

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                direction: rtl;
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            a {
                text-decoration: none;
            }

            ol,
            ul {
                list-style: none;
            }

            #navbar ul {
                background-color: blueviolet;
            }
            #navbar ul li{
                display: inline-block;
                position: relative;
            }
            #navbar ul li a{
                color: black;
                font-size: 20px;
                font-family: Arial, Helvetica, sans-serif;
                padding: 18px 25px;
                display: block;
            }
            #navbar ul ul{
                display: none;
                position: absolute;
                top: 100%;
                right: 0%;
            }
            #navbar ul li:hover>ul{
                display: block;
            }
            #navbar ul ul ul{
                display: none;
                position: absolute;
                top: 0;
                right: 100%;
            }
            #item1 {
                width: 300px;
                height: 200px;
                background-color: rgb(68, 126, 106);
                /* position: relative; */
                top: 100px;
                left: 500px;
            }

            #item2 {
                width: 200px;
                height: 200px;
                background-color: rgb(228, 29, 218);
                /* position: absolute; */
                top: 100%;
                right: 100%;

            }

            #item3 {
                width: 800px;
                height: 600px;
                background-color: aquamarine;
                margin: 100px auto;

            }

            #item4 {
                width: 200px;
                height: 200px;
                background-color: olive;
                position: sticky;
                top: 100px;
            }
        </style>
    </head>

    <body>
        <nav id="navbar">
            <ul>
                <li><a href="#">لینک1</a>
                    <ul>
                        <li><a href="#">لینک</a></li>
                        <li><a href="#">لینک</a></li>
                        <li><a href="#">لینک</a>
                        <ul>
                            <li><a href="#">لینک</a></li>
                            <li><a href="#">لینک</a></li>
                            <li><a href="#">لینک</a></li>
                        </ul>
                        </li>
                        <li><a href="#">لینک</a></li>
                    </ul>
                </li>
                <li><a href="#">لینک2</a></li>
                <li><a href="#">لینک3</a></li>
                <li><a href="#">لینک4</a></li>
                <li><a href="#">لینک5</a></li>
            </ul>
        </nav>
        <!-- <div id="item1">
        <div id="item2"></div>
        </div>
        <div id="item3">
            <div id="item4"></div>
        </div> -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>

    </html>

    سلام ممنون فقط استایل دهی رو تغییر بدید یکم رنگ و فونتش عوض کنید زیبا تر بشه کدتون اوکی بود ممنون