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

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

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
حذف اسکرول افقی (Horizontal Scroll) با CSS
ساخت منوی آبشاری (عمودی) با تگ ul li و CSS
تنظیم موقعیت در وسط و حذف حاشیه ها با CSS
آموزش استفاده از فونت فارسی در وب با CSS

دیدگاه

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

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

alitna

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

سلام. وبلاگ خیلی خیلی خوبی دارین. مخصوصا این قسمت. یه سوال. لطفا بیاین و بهم بگین. تو رو خدا بهم بیاین و بگین خیلی ضروری هست. لطفا.
من با برنامه alllwebmenus pro5 یک منو ساختم. بعد چندین فایل داد. یکی از کد هایی که میده مثل همین کد اولی هست. اما قالب اون که دومی هست رو نمیدونم از کجا بگیرم تا اون کدها رو در اون قالب نشون بده. لطفا کمکم کنین. امیدوارم با این برنامه کار کرده باشین و بدونین من چی میگم :(
خیلی گشتم اما پیدا نکردم. چیزی که میده یک فایل js هست و یک پوشه که درون اون چندین فایل js هست و یک پوشه دیگه که عکس های اونه و بعد نمونه اون رو ساخته و با آدرس کامپیوترم توی فایر فاکس ساخته شدش رو نشون میده. لطف کنین بیاین به وبلاگم و بهم بگین. با تشکر.

www.freedownlooad.mihanblog.com

متاسفانه با این برنامه کار نکرده ایم اما نباید ساختار متفاوتی نسبت به سایر برنامه های مشابه داشته باشد، باید سورس صفحه HTML که برنامه جهت نمونه در اختیارتان قرار می دهد را بررسی کنید و ببینید که چه فایل هایی در کد استفاده شده است، سپس از الگو پیروی کرده و فایل های مورد نیاز را در یک سرور آپلود و در قالب وبلاگتان کدها را اضافه کنید، جهت راهنمایی بیشتر یک نمونه از منوهای این برنامه را در یک فایل فشرده به ایمیل ما ارسال و مشکلتان را از آن طریق پیگیری نمائید.

armin

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

ببخشید چطور میشه این منو رو آورد وسط صفحه!!!؟؟؟ همه اش چسبیده به سمت راست صفحه!!!

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

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

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

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

لاله

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

با سلام و تشکر
برای شناساندن z-index به IE7 از چه علامتی میتوان استفاده کرد؟
ممنون

اینترنت اکسپلورر در نسخه های 6 و 7 با خاصیت z-index ناسازگاری هایی دارد، لذا برای حل آن باید از خاصیت های دیگری نیز در کنار z-index استفاده کنید، در IE7 مشکل با افزودن خاصیت position:relative بر طرف می شود، به فرض:

#div-block{
   position:relative;
   z-index:1;
}

مهسا

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

با سلام و سپاس از زحماتتون
دموي كار رو با IE7 مشاهده كردم اما مشكل داره يعني مقدار left روي اون تاثيري نذاشته.
در اين موارد با كوچك كردن سايز صفحه توسط اسكرول اين زير منوها جا به جا ميشه يعني فقط موقع ماكزيمايز يا روي بعضي مانيتورها جواب ميده.
بايد چي كاركنيم؟ :(

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

محمود

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

ممنون از مطلب خوب شما.

arvin

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

ببخشید، یه سوال دیگه هم داشتم، وقتی فونت کد رو از Tahoma به Times New Roman تغییر میدم، فونت های قسمت های دیگه وبلاگ ریز میشن.
فک میکنم قالب وبلاگ بر اساس فونت Tahoma نوشته شده، که با تغییر در این کد، یه ناسازگاری ایجاد میشه. چطور میتونم این مشکل رو حل کنم.

همان طور که در پیام قبلی گفته شد، می توانید کدهای مربوط به body را از قسمت استایل CSS منو حذف کنید، از این نظر مشکلی پیش نمی آید.

arvin

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

ببخشید، یه سوال دیگه هم داشتم، وقتی کد رو وارد میکنم، فونت قسمت های دیگه وبلاگ ریز میشه!!!!!!!!!!!
میشه لطف کنین دلیلش رو بهم بگین؟

احتمالا دلیل آن این است که شما کد را بدون ویرایش و حذف قسمت body در قالب کپی کرده اید، عنصر body را از قسمت CSS کد منو حذف کنید، منظور این قسمت است:

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}

arvin

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

سلام، ممنون از این ابزار، واقعا فوق العادست.
اما 3 تا سوال داشتم.
الان از همین کد در وبلاگ استفاده میکنم

xxd.blogsky.com

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

برای اعمال تنظیمات ظاهری پیشرفته باید بر استایل نویسی CSS مسلط باشید، تمام مواردی که در سوال عنوان کرده اید در صورت آشنایی با CSS قابل حل هستند، این نوع تنظیمات تحت تاثیر قالب اصلی وبلاگ نیز قرار دارند و لذا تنها می توانیم در همین حد راهنمایی کنیم.

لاله

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

دروووووووود
برای سازگاری این منو با IE6 مانند IE7 هم راهی وجود دارد؟
اگر هست لطف کنید و کد آن را بنویسید.
تشکر

متاسفانه مرورگر IE6 بیش از حد غیر استاندارد است و برای سازگار کردن خاصیت های CSS به ناچار باید از جاوا اسکریپت (یا منوهای جی کئوری) استفاده کرد که به زحمت آن نمی ارزد! البته در حال حاضر استفاده از IE6 به طور چشمگیری کاهش پیدا کرده و خیلی از سایت ها دیگر حتی آن را پشتیبانی هم نمی کنند.

person

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

سلام. ضمن تشکر از شما سوالی داشتم.
از کد این منو در صفحه asp خود استفاده کردم اما به دلیل وجود این قسمت:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

در کد html به مشکلاتی در صفحه asp خود بر می خورم برای مثال برای تگ span موجود در صفحه asp خود با استفاده از css نمی توانم width در نظر بگیرم و یا ارتفاع تگ div را به صورت درصدی نمی توان تعیین کرد و.....
ولی با حذف کد بالا از قسمت html صفحه asp خود این مشکلات رفع می شود ولی منوی آبشاری دیگر درست عمل نمی کند. با تشکر از شما برای حل این مشکل چه راه حلی پیشنهاد می کنید.

استفاده از DOCTYPE در صفحات HTML یا XHTML توصیه کنسرسیوم جهانی وب (W3C) است و از لحاظ استاندارد حذف آن توصیه نمی شود، از طرفی این احتمال وجود دارد که در جایی از کدهای خود مخصوصا در قسمت هدر موردی را به درستی تعریف نکرده باشید، مخصوصا وقتی از XHTML استفاده می کنید دقت کنید که بعد از DOCTYPE خواص یا attribute زبان XHTML را هم اضافه کنید، یعنی کدهای شما باید به فرض به صورت نمونه زیر باشد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fa-IR" xml:lang="fa-IR">
    <head>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    محتوا
    </body>
</html>

برای مطالعه بیشتر می توانید به این مطلب رجوع کنید:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟

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

سلام
ممنون از زحماتتون
اگه کدهای css رو توی فایل css جدا نوشتیم دستور شرطی سازگاری با IE 7 رو فقط مثل اینجا قبل از head بنویسیم کافیه؟

بله کافی است، دستورات شرطی را بعد از ایمپورت کردن فایل CSS در قسمت head اضافه کنید یا حتی می توانید استایل CSS مخصوص IE را نیز در یک فایل جداگانه نوشته و بعد از استایل اصلی به صورت نمونه زیر وارد صفحه کنید:

<!--[if IE 7]>
<link href="style/ie7.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]-->

سارا

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

با سلام
ممنون از آموزش خوبی که گذاشتید.
من به یه مشکلی برخورد کردم. منوها دقیقاً ساخته شده اما در حالت اجرا منوها باز نمیشن!
نمی دونم دلیلش چیه! میشه کمکم کنید؟

بررسی کنید که تگ ها را درست تعریف کرده باشید، یعنی شروع و پایان تگ ها دقیقا مانند کدی باشد که جهت نمونه ذکر شده، ممکن است قسمتی را به اشتباه جا انداخته باشید، به طور مثال این یک اشتباه است:

<!--[if IE 7]>
<style type="text/css">
#main-menu ul.sub-menu {
    left:-40px;    
}
</style>
<![endif]--

که علامت < در انتها حذف شده است و باعث می شود منو از کار بیفتد.

محمد حسین

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

سلام. چرا تو بلاگفا یا کلاً تو وبلاگ نمیخونه. یعنی منوی زیر مجموعش نمیاد.

فرقی ندارد در چه سیستمی این منو را استفاده کنید، مهم این است که کدهای HTML و CSS مورد نیاز به صورت صحیح درج شوند، از این منو در وبلاگ های بلاگفا نیز استفاده شده اما در مورد مشکل منو با وبلاگ شما لطفا آدرس آن را قرار دهید تا بررسی گردد.

sky

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

با سلام
خداییش توی کارتون زحمت کشیدن رو میشه حس کرد و خسته هم نباشید
من به html و css آشنایی دارم ولی یه مورد دیگه خسته ام کرده وهر چه بیشترسعی میکنم کمتر به نتیجه میرسم
من با همین نوع روش چندی پیش منویی ساختم و از button استفاده کردم در دو مدل یه عادی و یکی زمانی که موس روشه ولی اصلا دومی عمل نمیکنه
قسمتی از کد:

<ul id="cbinsmenuebul_table" class="cbinsmenuebul_menulist" style="width: 540px; height: 40px";>
 <li class="spaced_li"><a href="http://.....blogfa.com/rss" target="_blank"><img id="cbi_cbinsmenu_1" src="link button aval" name="ebbcbinsmenu_1" width="100" height="40" style="vertical-align: bottom;" border="0" alt="RSS" title="" /></a></li>
</ul>

البته الان اینجا گذاشتم فکر میکنم یه خورد بهم ریخته

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

milad

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

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

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

صفحه 8 از 9

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