جلسه 12

    سلام تغیرات رو اعمال کردم   خروجی درست رو نداد مجبور شدم توی ایدی  تری  به مقدار top  منفی9 رو بدم میخواستمک بدونم که چرا تغرات شما خروجی رو نداد و اینک هکجا مشکل داشت؟

     ممنون

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

    body {
        direction: rtl;
    }

    #nav ul {
        list-style: none;
        /* padding: 25px; */
        background-color: black;
    }

    #nav ul li {
        display: inline-block;
        position: relative;
    }

    #nav ul li a {
        color: white;
        text-decoration: none;
        font-size: 20px;
        /* vertical-align: 5px; */
        width: 100px;
        display: block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        padding: 5px 0;
        margin: auto;
        transition: background-color 2s;
    }

    #nav ul li a:hover {
        background-color: rgb(241, 240, 229);
        color: black;
        border-bottom: 1px solid rgb(8, 8, 8);
    }

    #nav ul ul {
        /* display: none; */
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 130%;
        right: 0%;
        transition: visibility 2s, opacity 2s;
        text-align: center;

    }

    #nav ul li:hover>ul {
        /* display: block; */
        visibility: visible;
        opacity: 1;
    }

    .tri {
        display: block;
        width: 0;
        height: 0;
        border-bottom: 10px solid rgb(252, 2, 2);
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        position: absolute;
        top: -9px;
        right: 30px;
    }

    سلام روز بخیر.. من مجدد چک کردم با همین کدی که می نویسم جای spanاوکیه مشکلی نداره..

    کدهاتون همینایی که برای من فرستادید باشه فقط این استایل جدید رو کپی کنید کلاس tri خودتون رو کامنت کنید چک کنید.

       .tri {

                display: block;

                width: 0;

                height: 0;

                border-bottom: 10px solid #d80404;

                border-left: 20px solid transparent;

                border-right: 20px solid transparent;

                position: absolute;
                bottom: 100%;
                right: 30%;

            }