آموزش کار با Position ها در css

شما باید ابتدا در مورد خاصیت ها و تفاوت های انواع Position ها در Css بدونید. وقتی که یک منو میخاید به همراه زیر منو ایجاد کنید زیر منو نمیتونه از یک محدود خاصی خارج بشه. چون اگر اون زیر منو از اون محدوده خارج بشه عملا دیگه زیر منو حساب نمیشه و باید دقیقا زیر منوی اصلی نمایش داده بشه.

خب وقتی میگیم Position = relative محدود این المنت با توجه به محدود المنتی که Position اون برابر با absolute هست تعیین میشه و دیگه از اون محدود خارج نمیشه و در همون محدود شناور میشه. اما اگر این Position ها مشخص نشه زیر منو در کل صفحه (body) شناور میشه و نمیتونیم دقیقا زیر منو ثابتش کنیم.

البته شما می تونید برای ایجاد منو از بوت استرپ هم استفاده کنید.

در ادامه براتون یک مثال از ساختن یک منو به همراه زیر منو که از Html و Css خالص استفاده شده رو مینویسیم.

کدهای مربوط به Html

<div id="navi">
            <!-- <nav> -->
            <ul id="mainmenu">
                <li>
                    <a href="#">About Us</a>

                </li>


                <li>
                    <a href="#">Contact Us</a>
                </li>
                <li>
                    <a href="#">Article</a>
                </li>
                <li>
                    <a href="#">News</a>

                    <ul id="submenu">
                        <li><a href="#">Sports</a></li>
                        <li>
                            <a href="#">Education &nbsp; &gt;</a>
                            <ul>
                                <li><a href="#">Univercity</a></li>
                                <li><a href="#">School</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Home</a>
                </li>
            </ul>
            <!-- </nav>-->
        </div>

کدهای مربوط به Css

#navi {
    margin: 0 auto;
    height: 40px;
    background-color: green;
    background: linear-gradient(rgb(55,100,20), rgb(200,200,200));
    width: 1000px;
    margin-bottom: 10px;
    border-radius: 2px;
    box-shadow: 5px 5px 5px 3px black;
}


#mainmenu {
    margin: 0 auto;
    width: 975px;
}