توجه : مرورگرهای فایرفاکس و گوگل کروم استفاده کنید

برای دیدن دمو اینجا روکلیک کنید

<!----------menu------منوها ----------------> <!----------menu------استایل ها----------------> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { if ($.browser.msie && $.browser.version.substr(0,1)<7) { $('li').has('ul').mouseover(function(){ $(this).children('ul').show(); }).mouseout(function(){ $(this).children('ul').hide(); }) } }); </script> <style> body { width: 960px; margin: 40px auto; } /* Main menu */ #menu { width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px; border-radius: 50px; -moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c; } #menu li { float: left; padding: 0 0 10px 0; position: relative; line-height: 0; } #menu a { float: left; height: 25px; padding: 0 25px; color: #999; text-transform: uppercase; font: bold 12px/25px Tahoma, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; } #menu li:hover > a { color: #fafafa; } *html #menu li a:hover /* IE6 */ { color: #fafafa; } #menu li:hover > ul { display: block; } /* Sub-menu */ #menu ul { list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5); -moz-border-radius: 5px; border-radius: 5px; } #menu ul ul { top: 0; left: 150px; } #menu ul li { float: none; margin: 0; padding: 0; display: block; -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; } #menu ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu ul a { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; } *html #menu ul a /* IE6 */ { height: 10px; } *:first-child+html #menu ul a /* IE7 */ { height: 10px; } #menu ul a:hover { background: #0186ba; background: -moz-linear-gradient(#04acec, #0186ba); background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)); background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); } #menu ul li:first-child > a { -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } #menu ul li:first-child > a:after { content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444; } #menu ul ul li:first-child a:after { left: -8px; top: 14px; width: 0; height: 0; border-left: 0; border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; } #menu ul li:first-child a:hover:after { border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after { border-right-color: #04acec; border-bottom-color: transparent; } #menu ul li:last-child > a { -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /* Clear floated elements */ #menu:after { visibility: hidden; display: block; font-size: 5; content: " "; clear: both; height: 0; } * html #menu { zoom: 1; } /* IE6 */ *:first-child+html #menu { zoom: 1; } /* IE7 */ </style> <!-- AdPacks --> <style> #adpacks-wrapper{font-family: Tahoma font: 14pt Tahoma, Helvetica, sans-serif; color: Gray; }, Helvetica;width:280px;position: fixed;_position:absolute;bottom: 0;right: 20px;z-index: 9999;background: #eaeaea;padding: 11px;-moz-box-shadow: 0 0 17px #444;-webkit-box-shadow: 0 0 15px #444;box-shadow: 0 0 15px #444;} body .adpacks{background:#fff;padding:15px;margin:15px 0 0;border:3px solid #eee;} body .one .bsa_it_ad{background:transparent;border:none;font-family:inherit;padding:0;margin:0;} body .one .bsa_it_ad .bsa_it_i{display:block;padding:0;float:left;margin:0 13px 0 0;} body .one .bsa_it_ad .bsa_it_i img{padding:0;border:none;} body .one .bsa_it_ad .bsa_it_t{padding: 0 0 6px 0; font-size: 13px;} body .one .bsa_it_p{display:none;} body #bsap_aplink,body #bsap_aplink:hover{display:block;font-size:15px;margin: -15px 0 0 0;text-align:right;} body .one .bsa_it_ad .bsa_it_d{font-size: 11px;} body .one{overflow: hidden} </style> </head> <body> <!----------menu------استایل ها----------------> <!----------menu------گزینه ها ----------------> <ul id="menu"<font size="3"> <li><a href="/">صفحه اصلی سایت</a></li> <li> <a href="#">خدمات</a> <ul> <li> <a href="#">گرافیکی</a> <ul> <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> <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> <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> <li><a href="#">user1</a></li> <li><a href="#">user2</a></li> <li><a href="#">user3</a></li> <li><a href="#">user4</a></li> </ul> </li> </ul> </li> <li> <a href="#">تست شما</a> <ul> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> </ul> </li> <li> <a href="#">test2</a> <ul> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> </ul> </li> <li> <a href="#">test3</a> <ul> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> <li> <a href="#">test</a> <ul> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> <li> <a href="#">test</a> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="/contact">تماس باما</a> </li> <li> <a href="/forum">انجمن سایت</a> <!----------menu------گزینه ها ----------------> </li> </ul> <br><br><br> </a> </div> <!----------menu------منوها ---------------->

توضیح : برای دیدن دمو از مروگر فایر استفاده کنید

برای دیدن دمو کلیک کنید

اول این کد رو تو تگ head و head/ قرار بدین:

<style type="text/css"> * { margin: 0; outline: none; font-family: "Arial, Tahoma" } body { background-color: #444444; } .c { clear: both; } #wrapper { margin: 0 auto; padding: 0 40px 60px 40px; width: 960px; } h2 { padding: 20px 0 10px 0; font-size: 24px; line-height: 40px; font-weight: normal; color: #adc276; text-shadow: 0 1px 3px #222222; } </style> <!-- sliderman.js --> <script type="text/javascript" src="http://mhda74.persiangig.com/other/slider/sliderman.1.3.0.js"></script> <link rel="stylesheet" type="text/css" href="http://mhda74.persiangig.com/other/slider/sliderman.css" /> <!-- /sliderman.js -->