آموزش برنامه نویسی وب و مهارتهای مرتبط

چهارشنبه ۱۳ خرداد ۱۴۰۵

Wednesday, June 3, 2026 GMT +3:30

ساخت منوی کشویی با تگ ul li و CSS

از کدها و استایل CSS علاوه بر کاربردهای معمول و روزمره برای خلق جلوه های خاص در بستر وب نیز استفاده می شود، یکی از این جلوه ها که محبوبیت زیادی نیز بین طراحان وب دارد خلق منوهای کشویی (بازشونده) یا به اصطلاح Dropdown مبتنی بر تگ های ul li و CSS است، عملکرد این امکان به این صورت است که لیستی از منوها با قابلیت داشتن زیر مجموعه هنگام بردن نشانه گر ماوس روی تگ والد ظاهر و با خارج کردن ماوس از محدوده تگ والد مجددا به طور خودکار محو می شوند، نوع پیشرفته تر این منوها با جاوا اسکریپت یا جی کئوری (jQuery) نیز وجود دارد که معمولا حجم بالاتر و از نظر اجرا به اصطلاح سنگینتر هستند، به هر صورت در این آموزش می خواهیم با نحوه ساخت منوهای کشویی یا بازشونده مبتنی بر تگ ul li و صرف استیال CSS آشنا شویم.

چرا از تگ ul li استفاده کنیم؟

اینکه چرا باید برای ساختن منوهای بازشونده از تگ ul li استفاده کنیم در درجه اول به این علت است که این نوع منوها از لحاظ موتورهای جستجو به راحتی قابل فهم و ایندکس شدن هستند که به اصطلاح به آنها Search Engine Friendly (موتور جستجو پسند) می گویند، از طرفی برای کاربران نابینا یا دارای معلولیت جسمی (Screen Readers) که از ابزارهای سخنگو و خط بریل استفاده می کنند و نمی توانند از امکانات مبتنی بر استایل CSS به نحو مطلوب بهره بگیرند وجود منوهای مبتنی بر تگ های ul li باعث می شود که علی رغم غیر فعال بودن ویژگی های ظاهری همچنان منوها به صورت دسته بندی شده، ترتیبی و زیرمجموعه ای قابل استفاده باشند، دلیل دیگر نیز می تواند رعایت اصل کدنویسی معنایی باشد، در HTML مبحثی تحت عنوان Semantic یا معنایی وجود دارد که به طور خلاصه یعنی استفاده ی به جا از تگ ها در هدف مد نظر از معرفی آن تگ، به طور مثال برای ایجاد لیستی از آیتم ها تگ ul li کاربرد دارد و نباید از تگ های دیگر که فلسفه ای متفاوت دارند استفاده کنیم.

ساخت چارچوب کار با کدنویسی HTML

قبل از پرداختن به استایل CSS منو ابتدا چارچوب کار و منوهای خود را مبتنی بر تگ ul li در HTML به صورت زیر می نویسیم، البته کد زیر صرفا جهت نمونه است و می توانیم با توجه به نیازمان آن را ویرایش و سفارشی سازی کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی کشويی با تگ ul li و CSS</title>
<!-- Webgoo.ir -->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="https://webgoo.ir">منوی اصلی</a>
   <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
   </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
    </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>
        <li><a href="#">منوی زيرمجموعه</a></li>        
    </ul>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>

توضیح:
- به نحوه قرار گرفتن آیتم های منو به صورت تگ های ul li در حالت تو در تو دقت کنیم، هر تگ ul یک سطح از منو را تعریف می کند.
- برای مدیریت یکپارچه جایگاه و نحوه نمایش منو، یک بلاک والد با آی دی فرضی main-menu ساخته ایم که درون خود تگ ul اصلی با زیرمجموعه هایی به صورت li ul li دارد.
- در تگ های ul سطح دو از کلاس sub-menu استفاده کرده ایم که در ادامه نحوه تنظیم ویژگی های آیتم های آن را در CSS خواهیم دید.

تعریف استایل CSS منو

پس از اینکه اسکلت بندی و چارچوب کار را با کدنویسی HTML ساختیم نوبت به تعریف ویژگی های ظاهری با اختصاص آی دی و کلاس در CSS است، بر همین مبنا در کد بالا یک آی دی و یک کلاس به کار رفته است (آی دی main-menu و کلاس sub-menu)، لذا قسمت عمده کار ما تعریف ویژگی ها برای این دو سلکتور خواهد بود که در استایل زیر این کار را انجام داده ایم و علاوه بر دو سلکتور آی دی و کلاس موارد عمومی مثل فونت صفحه، رنگ و حالت لینک ها و... را نیز تنظیم کرده ایم:

<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 20px;
}
a {
    text-decoration: none;
    color: #03C;
}
a:hover {
    color: #CCC;
}
#main-menu {
    position: relative;
    line-height: 16px;
}
#main-menu a {
    display: block;
    width: 150px;
    padding: 8px;
    border: #666 solid 1px;
    background-color: #030;
    color: #FFF;           
}
#main-menu a:hover {
    background-color: #060;        
}
#main-menu ul {
    list-style-type: none;
    padding-top: 0px;    
}
#main-menu li {
    float: right;
    position: relative;
    text-align: center;
}
#main-menu li ul a {
    text-align: center;
    border: 0px;
    border-bottom: #666 1px solid;
}
#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}
#main-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    margin-right: 0px;
    padding: 0px;
    z-index: 999;
}
#main-menu ul.sub-menu li {
    text-align: center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear {
    clear: both;
}
</style>

توضیح:
- مقادیر مربوط به سلکتور body و a به صورت کلی ویژگی های ظاهری صفحه وب را تعریف می کنند و در واقع حالت پیش فرض هستند.
- مقادیر position در آی دی main-menu باید به صورت relative یا نسبی تعیین شود، به این صورت ویژگی های تگ های زیرمجموعه آن از موقعیت این تگ به عنوان والد تبعیت می کنند.
- در قسمت main-menu li به این جهت از float و مقادیر right استفاده کرده ایم که منوها در کنار هم در یک سطح و از راست به چپ قرار بگیرند.
- به نحوه تعریف استایل برای تگ های زیرمجموعه ای در کد بالا دقت کنیم، به طور مثال تعریف به صورت main-menu li ul a بر روی عنصر ul که خود زیر مجموعه li است و li نیز داخل بلاک div با آی دی main-menu قرار دارد در حالت لینک شده اثرگذار است.
- کلیه مقادیر مربوط به رنگ های پس زمینه با توجه به سلیقه قابل تغییر است و از این لحاظ مشکلی نخواهد بود.
- ویژگی z-index برای قرار گرفتن لایه مربوط به آیتم های منو در بالاترین سطح کاربرد دارد، هرچقدر عدد z-index بیشتر باشد آن لایه بالاتر از سایر لایه ها در صفحه نمایش داده می شود.
- قسمت مربوط به clear و مقادیر both برای قرار گرفتن صحیح منو داخل بلاک main-menu لازم است، این خاصیت از سمت چپ و راست بلاک یک خط فرضی ترسیم می کند و اجازه چینش سایر المان ها در یک ردیف را نمیدهد.

سازگاری منو با مرورگرهای مختلف

این منو با نسخه های به روز تمام مرورگرها سازگار است و تنها ممکن است در برخی مرورگرهای قدیمی و منسوخ شده به طور مثال مرورگر غیراستاندارد و قدیمی اینترنت اکسپلورر نسخه 6 که به درستی از ویژگی های CSS پشتیبانی نمی کنند مشکل ناسازگاری داشته باشیم، برخی مرورگرها نیز به صورت ناقص از امکانات منو پشتیبانی می کنند که می توانیم استایل مخصوص آنها را در صفحه وارد کنیم، این کار را برای سازگاری منو با مرورگر اینترنت اکسپلورر 7 با دستور شرطی زیر انجام داده ایم:

<!--[if IE 7]>
<style>
#main-menu ul.sub-menu {
    left: 0px;    
}
</style>
<![endif]-->

ایجاد منوی زیر مجموعه سطح دوم

با استفاده از خاصیت display و مقادیر none و block می توانیم منوی کشویی را توسعه داده و به هر تعداد منوی زیر مجموعه ایجاد کنیم، به طور مثال با افزودن ویژگی های CSS زیر به استایل منو این کار را برای ایجاد منوهای زیر مجموعه سطح دوم انجام می دهیم:

#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}

توضیح:
- خاصیت display با مقادیر none در تکه کد اول برای حالتی است که تگ li اول در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای اصلی می برد)، لذا تگ ul در دو سطح پائین تر از تگ li (یعنی همان تگ ul که منوی زیرمجموعه سطح دو را در خود دارد) باید مخفی باشد.
- خاصیت display با مقادیر block در تکه کد دوم برای حالتی است که تگ li دوم در حالت فعال است (یعنی کاربر ماوس را روی یکی از منوهای سطح اول می برد)، لذا تگ ul دربرگیرنده منوی زیر مجموعه سطح دوم باید نمایش داده شود.
- با درک قانون سلکتورها در CSS و کمی آزمایش و خطا می توانیم سطح منو را به تعداد بیشتری توسعه دهیم.

کد منو و پیش نمایش آنلاین

در زیر کد نهایی منو و پیش نمایش آن را به صورت آنلاین می توانیم بررسی و تست کنیم:

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی کشویی با تگ ul li و CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 20px;
}
a {
    text-decoration: none;
    color: #03C;
}
a:hover {
    color: #CCC;
}
#main-menu {
    position: relative;
    line-height: 16px;
}
#main-menu a {
    display: block;
    width: 150px;
    padding: 8px;
    border: #666 solid 1px;
    background-color: #030;
    color: #FFF;           
}
#main-menu a:hover {
    background-color: #060;        
}
#main-menu ul {
    list-style-type: none;
    padding-top: 0px;    
}
#main-menu li {
    float: right;
    position: relative;
    text-align: center;
}
#main-menu li ul a {
    text-align: center;
    border: 0px;
    border-bottom: #666 1px solid;
}
#main-menu li:hover ul ul {
    display: none;
}
#main-menu li li:hover ul {
    display: block;
    position: absolute;
    top: 10px;
    right: 125px;
    z-index: 1000;
}
#main-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 30px;
    margin-right: 0px;
    padding: 0px;
    z-index: 999;
}
#main-menu ul.sub-menu li {
    text-align: center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear {
    clear: both;
}
</style>
<!--IE 7-->
<!--[if IE 7]>
<style>
#main-menu ul.sub-menu {
    left: 0px;    
}
</style>
<![endif]-->
</head>
<body>
<div id="main-menu">
<ul>
<li><a href="https://webgoo.ir">منوی اصلی</a>
   <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
           </ul>
        </li>
        <li><a href="#">منوی زیرمجموعه</a></li>        
   </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
           </ul>
        </li>
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه</a></li>        
    </ul>
</li>
<li><a href="#">منوی جانبی</a>
    <ul class="sub-menu">
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
           </ul>
        </li>          
        <li><a href="#">منوی زیرمجموعه</a></li>
        <li><a href="#">منوی زیرمجموعه &raquo;</a>
            <ul>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
                <li><a href="#">منوی زیر مجموعه - 2</a></li>
           </ul>
        </li>        
    </ul>
</li>
</ul>
<div class="clear"></div>
</div>
<hr>
برای بررسی ویژگی ها و سطوح منو ماوس را روی آیتم ها ببرید.
</body>
</html>

پیش نمایش آنلاین

دسته بندی: آموزش کاربردی » CSS

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

مطالب بیشتر:
آموزش استفاده از فونت فارسی در وب با CSS
مخفی کردن عناصر وب با CSS
ساخت بلاک شناور عمودی با CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
حذف اسکرول افقی (Horizontal Scroll) با CSS

دیدگاه

۱۲۸ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

hamed18041391

۱۸:۰۲ ۱۳۹۲/۰۴/۰۹

سلام
بابت مطالب بسیار خوب سایتتان تشکر میکنم و توفیق روز افزون برای شما بزرگواران آرزومندم
برای وسط بردن این منو سوال دارم و روشی که فرمودین از تگcenter استفاده بشه برای من جواب نداد! حتی دستور css که یکی از نظرات پاسخ گفته بودین
آیا ممکنه از مرورگر باشه یا سیستمم ویروسی باشه؟! آخرین آپدیت فایرفاکس و کروم رو دارم
لطفا اگه روشی دیگه ای هست بفرمائین
بسیار سپاس

خیر این مسئله ارتباطی به سیستم عامل و ویروسی بودن و... ندارد، به احتمال زیاد مشکل از سایر عناصر HTML و کدهای CSS است که در صفحه وجود دارند، حل این مشکل تنها با تسلط نسبی بر CSS و بررسی کدهای صفحه ممکن است.

باران

۲۳:۲۶ ۱۳۹۲/۰۳/۲۵

سلام ...ممنون از مطلبتون...
یه سوال داشتم! اگر همین منو ها را با زبان asp.net بخوایم بنویسیم طوری که این منو ها را از دیتابیس بخونه و نشون بده ...چطور میشه؟ و آیا میشه تعداد این زیر منو ها متغیر باشه ...یعنی بعدا مدیر سایت میتونه یه زیر منو به اینها اضافه یا یکی کم کنه؟

اگر بر یک زبان سمت سرور (مانند ASP، PHP و...) مسلط باشید می توانید به راحتی از هر قابلیت استاتیکی خروجی داینامیک تولید کنید، اما اینکه چطور باید آن را انجام داد در کل جواب مشخصی ندارد، بستگی به تسلط و آشنایی شما و ساختار دیتابیس، جداول، ستون ها و... دارد، در مجموع خارج از مباحث برنامه نویسی (فراخوانی اطلاعات از دیتابیس، خروجی در دستورات شرطی، کار با حلقه ها و...) نیست!

شادی

۱۶:۵۱ ۱۳۹۲/۰۲/۳۰

سلام
ممنون از منوی خوبتون ..
میخواستم بدونم میتونم از توی کد یکی از منوها رو disable کنم یا نه ؟
مثلاً بعضی از کاربرای سایت دسترسی به یکی از این li هارو ندارن ، چجوری میتونم غیر فعالش کنم از توی کد؟!

باید منو را به صورت داینامیک (از طریق کدهای PHP) خروجی دهید و آن گزینه ای که نیاز به سطح دسترسی است را در یک شرط if بررسی و در صورت صحیح بودن چاپ کنید.

الهام

۲۲:۵۹ ۱۳۹۲/۰۱/۰۷

خیلی ممنون
درست شد

الهام

۲۱:۳۹ ۱۳۹۲/۰۱/۰۷

سلام
من از همین کد منوی کشویی استفاده کردم . سایتی که درست کردم رو با فایر فاکس که مشاهده می کنم منوی کشویی رو نشون میده ولی با IE 9 که نگاه می کنم منوی کشویی رو نشون نمیده.
مشکل کجاست؟

پیش نمایش منو را که لینک آن در آموزش قرار دارد در مرورگر IE 9 تست کنید، اگر مشکل وجود نداشت پس ایراد از کدهای سایت شما است، به طور مثال استفاده نکردن از DOCTYPE می تواند باعث بروز این نوع مشکلات شود، اما اگر در این صفحه نیز منو ظاهر نشد متاتگ زیر را در صفحه خود اضافه کنید.

<meta http-equiv="X-UA-Compatible" content="IE=8">

۱۸:۳۲ ۱۳۹۱/۱۲/۲۱

واقعا ممنونم، لطفا این نمونه مثال ها رو بیشتر کنید

مهدی

۲۲:۱۳ ۱۳۹۱/۱۲/۱۰

سلام ممنون از کد ها و منو های کاربردیتون
من تونستم با کد منوی آبشاری و کشویی شما یه قالب برای خودم بسازم . ممنون
ولی یه سؤال داشتم چه طور میشه تنظیمات این منو را طوری تغییر داد تا با رفتن موس روی یکی از آن ها به جای آنکه به طور عمود به پایین بیاد ، به صورت افقی باز بشه؟
مثل بعضی از سایت ها؟

منوی مد نظر شما در مطلب دیگری آموزش داده شده است، کافی است در قسمت جستجوی سایت، عبارت "آبشاری" را وارد کنید.

ریحانه

۰۰:۰۸ ۱۳۹۱/۱۲/۰۸

سلام،ممنون بابت کدهایی که گذاشتین
یه سوال دارم اگه جواب بدین ممنون میشم
چرا هر کار می کنم این منو وسط صفحه قرار نمی گیره؟؟؟ چه دستوری باید اضافه یا کم بشه؟؟

این پرسش قبلا مطرح شده، برای تنظیم منو باید از CSS استفاده کنید، به طور مثال منو را در یک بلاک div با استایل زیر قرار دهید:

<div style="margin-left:auto; margin-right:auto;">
کد منو را اینجا قرار دهید
</div>

یا از تگ center در HTML استفاده کنید (توصیه نمی شود):

<center>
کد منو را اینجا قرار دهید
</center>

صادق

۱۱:۳۲ ۱۳۹۱/۱۱/۱۵

دستتون خوش واقعا وب مفید و با محتوای دارید
از پاسخ سریع و مفیدتون هم ممنون
اگه میشه کمکم کنید رنگ منو رو عوض کنم هر چی رنگا رو تغیر دادم نشد
رنگ منو رنگ بالای بلوک های وبلاگم باشه

خواهش می کنیم، نظر لطف شما است.
در مورد تغییر رنگ منو کاملا بر مبنای CSS است و می توانید با گرفتن یک تصویر (اسکرین شات) از صفحه وبلاگ، در فتوشاپ طیف رنگی مورد نظر را به دست آورید و منو را مطابق آن تنظیم نمائید.

داوود

۱۵:۰۹ ۱۳۹۱/۱۰/۱۸

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

داوود

۰۹:۱۷ ۱۳۹۱/۱۰/۱۸

سلام.
ممنون از آموزش خوبتون.
امکانش هست همین منو رو بصورت تو در تو تا مثلا 4 سطح آموزش بدید؟
لطفا از طریق ایمیل خبرم کنید.
یا علی

ممنون از پیشنهادتان، ایجاد منوی زیر مجموعه به آموزش افزوده شد.

ایمان

۱۸:۱۰ ۱۳۹۱/۰۹/۲۹

سلام
آقا دمت گررررررررررررررممممممممممممم
خیلی حااااااااااااال دادی
مرسییییییییییییی

SMH

۱۸:۱۶ ۱۳۹۱/۰۹/۲۴

آقا ممنون
چجور میشه این منو را به وسط مرورگر برد ؟؟؟

<div style="margin-left:auto; margin-right:auto;">
کد منو را اینجا قرار دهید
</div>

یا از تگ center در HTML استفاده کنید:

<center>
کد منو را اینجا قرار دهید
</center>

۱۵:۰۳ ۱۳۹۱/۰۹/۲۰

من کد ها رو بررسی کردم // اما چرا شما به این شکل از کدها استفاده کردین:

1-#main-menu ul 
2-#main-menu li
3-#main-menu li ul a
4-#main-menu ul.sub-menu

مثلا در ul اولی یه سری استایل دادین و برای li هم همین طور و در ادامه اومدین دوباره به اینها استایل دادین.
(li ul a )... می خوام بدونم نحوه ی اجرای اینا چطوریه آیا نمیشد همش رو یه جا نوشت . من css و html رو بلدم اما به صورت کاربردی باهاش کار نکردم اینجاش رو متوجه نشدم. امیدوارم واضح گفته باشم.

استایل ها چند بار تکرار نشده اند، بلکه نسبت به عناصر و تگ هدف، در موارد متفاوت تعریف شده اند، اگر به ساختار درختی (DOM یا Document Object Model) منو نگاه کنید، متوجه می شوید که تگ ul هم در سطح بالا استفاده شده و هم درون تگ های li، به همین خاطر برای تنظیم استایل ul اول به فرض می نویسیم:

#main-menu ul {
    list-style-type:none;
    padding-top:0px;    
}

و برای دسترسی به ul داخل تگ li می نویسیم:

#main-menu li ul a{
    text-align:center;
    border:0px;
    border-bottom:#666 1px solid;
}

که در اینجا ما از a استفاده کرده ایم و یعنی حالت تگ ul در هنگام لینک بودن را تعریف کرده ایم، به همین ترتیب برای دسترسی به تگی با کلاس فرضی sub-menu درون تگ اصلی ul، می نویسیم:

#main-menu ul.sub-menu {
    display:none;
    position:absolute;
    top:30px;
    margin-right:0px;
    padding:0px;
    z-index:999;
}

در واقع ما به یک نوعی آدرس عنصر هدفمان را که می خواهیم ویژگی css بر آن اثر بگذارد، به طور دقیق مشخص می کنیم، همین کار را با اختصاص کلاس هم می توان انجام داد که راه دورتری است.

سعادتی

۰۱:۵۹ ۱۳۹۱/۰۹/۱۷

با سلام و تشکر از مطلب مفیدتون. می خواستم بدونم اگه بخوام منو رو به صورتی تغییر بدم که به جای باز شدن زیر منوها در جلوی منوی اصلی، در پایین منوی اصلی باز بشه و بقیه منوها هم پایین کشیده بشن (مثل منوی سمت راست سایت www.ebakh.com) چی کار باید بکنم؟
اگر لطف کنید زاهنمایی بفرمایید ممنون میشم

منوی مد نظر شما در اصطلاح منوی آبشاری نامیده می شود که آموزش آن را می توانید در همین صفحه از قسمت آموزش بعدی (دکمه های بعدی و قبلی) ملاحظه نمائید.

صفحه 7 از 9

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.