مشکل با ساخت منو آبشاری css

رضاقاسمی · مهر 93

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

من میخوام منو رو افقی کنم دستور float:right رو میدم background رو نشون نمیده

پیشاپیش از پاسخ دهندگان محترم سپاسگزارم.

m4mali · مهر 93

ببینید این چطور است

<html>
    <head>
        <title>منو</title>
        <style>
            body
            {
                background-color:#00FFF6;
            }
            .navigation a
            {
                color:#666;
                height:25px;
                line-height:25px;
                text-indent:10px;
                text-decoration:none;
                width:100%;
            }
            .navigation a:hover
            {
                text-decoration:underline;
            }

            .navigation
            {
                font-size:12px;
                font-family:b yekan;
            }

            .navigation ul
            {
                margin:0px;
                padding:0px;
                width:100%;
            }

            .navigation ul li
            {
                list-style:none;
                display: inline-block;
                padding: 0 20px 0 20px;
                background: #fff;
            }    

            .navigation li:hover
            {
            background:#f90;
            position:relative;
            }
            
            ul.sub-level
            {
            display:none;
            }

            .navigation li:hover .sub-level
            {
            background:#fff;
            border:#fff solid;
            display:block;
            position:absolute;
            top:25px;
            left: 0px;
            }

            ul.sub-level li
            {
            border:none;
            float:right;
            width:150px;
            }
        </style>

    </head>
    <body dir="rtl">
            <div class="navigation">
                <ul>
                    <li><a href="#">صفحه اصلی</a>
                        <ul class="sub-level">
                            <li><a href="#">منوی 1</a></li>
                            <li><a href="#">منوی 2</a></li>
                            <li><a href="#">منوی 3</a></li>
                            <li><a href="#">منوی 4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">فروشگاه</a></li>
                    <li><a href="#">پروفایل</a></li>
                    <li><a href="#">آموزش</a></li>
                    <li><a href="#">تماس با ما</a></li>
                    <li><a href="#">درباره ما</a></li>
                </ul>
            </div>
    </body>
</html>

رضاقاسمی · مهر 93

سلام ممنون عالیه فقط میشه بگی چه کارایی انجام دادی؟

با توضیحات کامل راجع به کد ها.

m4mali · مهر 93

سلام ممنون عالیه فقط میشه بگی چه کارایی انجام دادی؟

با توضیحات کامل راجع به کد ها.

کار پیچیده ای انجام ندادم

شما می بایست دستور display:inline-block رو برای li به کار می بردید. (گمان می کنم گره کار در همین جا بود)

و پهنای ul رو هم روی 250 گذاشته بودید که این هم باز li ها رو wrap می کرد. که من برداشتم و کارهای دیگری هم که انجام دادم یه سری border داده بودین که بی نیاز بود و تگ a رو هم display:block داده بودین که نیازی نبود.

یک کمی code ها رو باهم بسنجین متوجه می شوید که چه کارهایی انجام داده ام.

ورود

آخرین ارسال های انجمن جومینا

دانلود جوملای فارسی

دانلود افزونه ها

پیامک متصل به جوملا

کانال تلگرام جومینا

مشکل با ساخت منو آبشاری css

پست های پیشنهاد شده

رضاقاسمی 1,539

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

m4mali 478

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

رضاقاسمی 1,539

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

m4mali 478

به اشتراک گذاری این ارسال

لینک به ارسال

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست

فعالیت ها