جلسه 12

    • 1403/05/21 13:25
    علی اکبر راه چمندی
    علی اکبر راه چمندی
    کاربر
    0

      سلام چرا زیر مجموعه هام اعمال نمیشه؟

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

    body {
        direction: rtl;

    }

    #navbor ul {
        list-style: none;
        background-color: rgb(226, 2, 2);
    }

    #navbor ul li {
        display: inline-block;
        position: relative;
        /* width: 150px; */
        /* height: auto; */
    }

    #navbor ul li a {
        color: rgb(3, 3, 250);
        font-size: 20px;
        font-family: 'Times New Roman', Times, serif;
        padding: 15px 0;
        width: 100px;
        height: auto;
        text-decoration: none;
        display: block;
    }

    #navbor ul li a:hover {

        background-color: black;
        color: gold;
    }

    #navbor ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 100;
        right: 100px;
        text-align: center;

    }

    #navbor ul li:hover>ul {
        visibility: hidden;
        opacity: 1;
    }
     
     
     
     
     
     
    <html>

    <head>
        <link rel="stylesheet" href="../تمرین/css/.css">
    </head>

    <body>
        <nav id="navbor">
            <ul>
                <li><a href="">لینک</a></li>
                <li><a href="">لینک</a></li>
                <li><a href="">لینک</a>
                    <ul class="li"><a href="">لینک</a></ul>
                    <ul class="li"><a href="">لینک</a></ul>
                    <ul class="li"><a href="">لینک</a></ul>
                </li>
                <li><a href="">لینک</a></li>
            </ul>
        </nav>
    </body>

    </html>
     

    • 1403/05/21 14:16
    ایران باینری
    ایران باینری
    استاد
    0

    سلام

    اولا کد html رو اشتباه نوشتید براتون ادیت کردم .. کدهای خودتون رو کامنت کردم که اشکالتون رو ببینید و کد صحیح رو نوشتم


        <nav id="navbor">

            <ul>

                <li><a href="">لینک</a></li>

                <li><a href="">لینک</a></li>

                <li><a href="">لینک33</a>

                    <!-- <ul class="li"><a href="">لینک</a></ul>

                    <ul class="li"><a href="">لینک</a></ul>

                    <ul class="li"><a href="">لینک</a></ul> -->
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                    </ul>

                </li>

                <li><a href="">لینک</a></li>

            </ul>

        </nav>
     
    دوما در استایل css هم اشکال داشتید براتون ادیت کردم و اشتباهات خودتون رو کامنت کردم که ببینید تغییرات رو
      #navbor ul ul {
                /* visibility: hidden; */
                display: none;
                opacity: 0;
                position: absolute;
                /* top: 100;
                right: 100px; */
                text-align: center;
            }
            #navbor ul li:hover>ul {
                /* visibility: hidden; */
                display: block;
                opacity: 1;
            }