تمرین منو

    • 1403/05/26 12:24
    پیمان سبحانی
    پیمان سبحانی
    کاربر
    0

    سلام استاد خوبین؟ من با استایل های تمرین شما یه منو طراحی کردم ولی یه فاصله ای داره اضافه نمی دونم از چیه.. استایل هام همش مثل شماست میشه چک کنین؟ مرسی

     ul {
                background-color: #023a3a;
               
            }

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

            ul li a {
                text-decoration: none;
                font-size: 20px;
                font-family: dinar;
                display: block;
                width: 250px;
                text-align: center;
                padding: 18px 0;
                color: #fff;
                transition: background-color 0.8s, color 0.8s;
            }

            ul li a:hover {
                background-color: #fff;
                color: #023a3a;
                border-bottom: 1px solid #023a3a;
            }

            ul ul {
                /* display: none; */
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 120%;
                right: 0;
                border-radius: 5px;
                transition: visibility 2s, opacity 2s;
            }
            ul ul ul{
                /* display: none; */
                visibility: hidden;
                opacity: 0;
                position: absolute;
                top: 0%;
                right: 100%;
                border-radius: 5px;
                transition: visibility 2s, opacity 2s;
            }
            ul li:hover>ul {
                /* display: block; */
                visibility: visible;
                opacity: 1;
            }
     
       <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
            <li><a href="#">link3</a>
            <ul>
                <li><a href="#">link3-1</a></li>
                <li><a href="#">link3-2</a></li>
                <li><a href="#">link3-3</a></li>
                <li><a href="#">link3-4</a>
                    <ul>
                        <li><a href="#">link3-4-1</a></li>
                        <li><a href="#">link3-4-2</a></li>
                    </ul>
                </li>
            </ul>
    </li>
            <li><a href="#">link4</a></li>
        </ul>

    • 1403/05/26 12:43
    ایران باینری
    ایران باینری
    استاد
    0

    سلام این مشکل به دلیل وجود margin و padding پیش فرض تگ هاست.. این فاصله هم برای تگ ul هست می تونید این کد رو اضافه کنید،پیشنهاد می کنم در همه طراحی این کار رو انجام بدید.

      *{
            margin: 0;
            padding: 0;
           }