<header class="cont header" >
<div class="header">
<ul class="sky-mega-menu sky-mega-menu-anim-slide sky-mega-menu-response-to-stack">
<li><a href="http://www.pedal.ir/">پدال</a></li>
<li>
<a>دنیای خودرو</a>
<div class="grid-container3">
<ul>
<li>
<a >خودروهای ایرانی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%ae%d9%88%d8%af%d8%b1%d9%88/">ایران خودرو</a></li>
<li><a href="http://www.pedal.ir/category/%d8%b3%d8%a7%db%8c%d9%be%d8%a7/">سایپا</a></li>
<li><a href="http://www.pedal.ir/category/%d9%be%d8%a7%d8%b1%d8%b3-%d8%ae%d9%88%d8%af%d8%b1%d9%88/">پارس خودرو</a></li>
</ul>
</div>
</li>
<li>
<a >خودروهای آلمانی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%a2%d8%a6%d9%88%d8%af%db%8c/">آئودی</a></li>
<li><a href="http://www.pedal.ir/category/%d8%a8%db%8c-%d8%a7%d9%85-%d9%88/">ب ام و</a></li>
<li><a href="http://www.pedal.ir/category/%d9%be%d9%88%d8%b1%d8%b4%d9%87/">پورشه</a></li>
<li><a href="http://www.pedal.ir/category/%d9%81%d9%88%d9%84%da%a9%d8%b3-%d9%88%d8%a7%da%af%d9%86/">فولکس</a></li>
<li><a href="http://www.pedal.ir/category/%d8%a8%d9%86%d8%b2/">مرسدس بنز</a></li>
</ul>
</div>
</li>
<li>
<a>خودروهای ایتالیایی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%a2%d9%84%d9%81%d8%a7%d8%b1%d9%88%d9%85%d8%a6%d 9%88/">آلفارومئو</a></li>
<li><a href="http://www.pedal.ir/category/%d9%81%d8%b1%d8%a7%d8%b1%db%8c/">فراری</a></li>
<li><a href="http://www.pedal.ir/category/%d9%81%db%8c%d8%a7%d8%aa/">فیات</a></li>
<li><a href="http://www.pedal.ir/category/%d9%84%d8%a7%d9%85%d8%a8%d9%88%d8%b1%da%af%db%8c%d 9%86%db%8c/">لامبورگینی</a></li>
</ul>
</div>
</li>
<li>
<a>خودروهای ژاپنی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%aa%d9%88%db%8c%d9%88%d8%aa%d8%a7/">تویوتا</a></li>
<li><a href="http://www.pedal.ir/category/%d9%86%db%8c%d8%b3%d8%a7%d9%86/">نیسان</a></li>
<li><a href="http://www.pedal.ir/category/%da%af%d8%b1%d9%88%d9%87-%d8%a8%d9%87%d9%85%d9%86/%d9%85%d8%b2%d8%af%d8%a7/">مزدا</a></li>
<li><a href="http://www.pedal.ir/category/%d9%85%db%8c%d8%aa%d8%b3%d9%88%d8%a8%db%8c%d8%b4%d b%8c/">میتسوبیشی</a></li>
<li><a href="http://www.pedal.ir/category/%d9%87%d9%88%d9%86%d8%af%d8%a7/">هوندا</a></li>
</ul>
</div>
</li>
<li>
<a>خودروهای کره ای</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d9%87%db%8c%d9%88%d9%86%d8%af%d8%a7%db%8c/">هیوندای</a></li>
<li><a href="http://www.pedal.ir/category/%da%a9%db%8c%d8%a7/">کیا</a></li>
</ul>
</div>
</li>
<li>
<a>خودروهای آمریکایی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%ac%d9%86%d8%b1%d8%a7%d9%84-%d9%85%d9%88%d8%aa%d9%88%d8%b1%d8%b2/">جنرال موتورز</a></li>
<li><a href="http://www.pedal.ir/category/%d9%81%d9%88%d8%b1%d8%af/">فورد</a></li>
<li><a href="http://www.pedal.ir/category/%da%a9%d8%b1%d8%a7%db%8c%d8%b3%d9%84%d8%b1/">کرایسلر</a></li>
</ul>
</div>
</li>
<li>
<a>خودروهای فرانسوی</a>
<div class="grid-container4">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%ae%d9%88%d8%af%d8%b1%d9%88/%d9%be%da%98%d9%88/">پژو</a></li>
<li><a href="http://www.pedal.ir/category/%d8%b1%d9%86%d9%88/">رنو</a></li>
<li><a href="http://www.pedal.ir/category/%d8%b3%db%8c%d8%aa%d8%b1%d9%88%d8%a6%d9%86/">سیتروئن</a></li>
<li><a href="http://www.pedal.ir/category/%d8%a8%d9%88%da%af%d8%a7%d8%aa%db%8c/">بوگاتی</a></li>
</ul>
</div>
</li>
<li><a href="http://www.pedal.ir/category/%d8%ae%d9%88%d8%af%d8%b1%d9%88%d9%87%d8%a7%db%8c-%da%86%db%8c%d9%86%db%8c/">خودروهای چینی</a></li>
<li><a href="http://www.pedal.ir/sitemap/"> فهرست کامل ›› </a></li>
</ul>
</div>
</li>
<li>
<a>دسته ها</a>
<div class="grid-container3">
<ul>
<li><a href="http://www.pedal.ir/category/%d8%af%d9%88%da%86%d8%b1%d8%ae%d9%87/">دوچرخه</a></li>
<li><a href="http://www.pedal.ir/category/%d9%85%d9%88%d8%aa%d9%88%d8%b1%d8%b3%db%8c%da%a9%d 9%84%d8%aa/">موتورسیکلت</a></li>
<li><a href="http://www.pedal.ir/category/%d8%b5%d9%86%d8%a7%db%8c%d8%b9-%d9%87%d9%88%d8%a7%db%8c%db%8c/">صنایع هوایی</a></li>
<li><a href="http://www.pedal.ir/category/%d9%85%d8%b3%d8%a7%d8%a8%d9%82%d8%a7%d8%aa/">مسابقات</a></li>
<li><a href="http://www.pedal.ir/category/%d8%a2%d9%85%d9%88%d8%b2%d8%b4/">آموزش</a></li>
<li><a href="http://www.pedal.ir/category/%d8%aa%d8%ac%d8%b1%d8%a8%d9%87-%d8%a2%d8%b2%d9%85%d8%a7%db%8c%d8%b4/">تجربه و آزمایش</a></li>
<li><a href="http://www.pedal.ir/category/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c/">طراحی</a></li>
<li><a href="http://www.pedal.ir/topic/%d9%86%d8%b8%d8%b1%d8%b3%d9%86%d8%ac%db%8c/">نظرسنجی</a></li>
<li><a href="http://www.pedal.ir/topic/%d9%86%d9%85%d8%a7%db%8c%d8%b4%da%af%d8%a7%d9%87-%d9%87%d8%a7/">نمایشگاه ها</a></li>
<li><a href="http://www.pedal.ir/category/%d9%85%d8%aa%d9%81%d8%b1%d9%82%d9%87/">متفرقه</a></li>
</ul>
</div>
</li>
<li>
<a>نیش ترمز</a>
<div class="grid-container3">
<ul>
<li class="page_item"><a href="http://shop.pedal.ir/">فروشگاه</a></li>
<li class="page_item"><a href="http://www.pedal.ir/takeoff/mms/">سرویس پیشخوان ایرانسل</a></li>
<li class="page_item"><a href="http://www.pedal.ir/takeoff/about/">درباره سایت</a></li>
<li class="page_item"><a href="http://www.pedal.ir/takeoff/contact/">تماس با ما</a></li>
<li class="page_item"><a href="http://www.pedal.ir/takeoff/tos/">قوانین و مقررات</a></li>
<li class="page_item"><a href="http://www.pedal.ir/ads/">تبلیغات در سایت</a></li>
<li class="page_item"><a href="http://www.pedal.ir/takeoff/invite/">همکاری با سایت پدال</a></li>
<li class="page_item"><a href="http://www.pedal.ir/links/">لینک ها</a></li>
<li><a href="http://www.pedal.ir/sitemap/">نقشه سایت</a></li>
</ul>
</div>
</li>
<li><a href="http://forum.pedal.ir/">انجمن</a></li>
<li><a href="http://www.pedal.ir/price/">قیمت روز خودروها</a></li>
</ul>
</div>
<!-- /container -->
</header>
این کد css3
/**/
/* level 1 */
/**/
.sky-mega-menu {
position: relative;
font-size: 0;
line-height: 0;
}
.sky-mega-menu:after {
content: '';
display: table;
clear: both;
}
.sky-mega-menu li {
position: relative;
display: inline-block;
float: right;
padding: 5px;
border-style: dotted;
border-color: #ccc;
border-right-width: 1px;
font-size: 13px;
line-height: 35px;
}
.sky-mega-menu li a {
display: block;
text-decoration: none;
font-weight: bold; color: #b8d9ea;
transition: background 0.4s, color 0.4s;
-o-transition: background 0.4s, color 0.4s;
-ms-transition: background 0.4s, color 0.4s;
-moz-transition: background 0.4s, color 0.4s;
-webkit-transition: background 0.4s, color 0.4s;
}
.sky-mega-menu li > div {
position: absolute;
z-index: 9;
top: 100%;
left: 999px;
margin-top: 8px;
background: rgba(255,255,255,0.9);
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity: 0;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-o-transition: -o-transform 0.4s, opacity 0.4s;
-ms-transition: -ms-transform 0.4s, opacity 0.4s;
-moz-transition: -moz-transform 0.4s, opacity 0.4s;
-webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
}
.sky-mega-menu li > div:after {
content: '';
position: absolute;
bottom: 100%;
right: 0;
width: 100%;
height: 8px;
background: transparent;
}
.sky-mega-menu li > div:before {
content: '';
position: absolute;
bottom: 100%;
right: 24px;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(255,255,255,0.9);
border-left: 5px solid transparent;
}
.sky-mega-menu li:hover > a,
.sky-mega-menu li.current > a {
background: #2da5da;
color: #fff; text-shadow: 0 0 10px #fff;
}
.sky-mega-menu li:hover > div {
right: 0;
opacity: 1;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10 0)";
/* IE 5-7 */
filter: alpha(opacity=100);
-webkit-transform: translate(0, 0);
}
.sky-mega-menu .right {
float: none;
border-right-width: 0;
border-left-width: 1px;
}
.sky-mega-menu .right > div {
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right:hover > div {
right: 0;
left: auto;
}
.sky-mega-menu .right:hover > div:before {
right: auto;
left: 24px;
}
.sky-mega-menu .switcher {
display: none;
}
/**/
/* level 2+ */
/**/
.sky-mega-menu li li {
display: block;
float: none;
border-width: 0;
border-top-width: 1px;
line-height: 21px;
}
.sky-mega-menu li li:first-child {
border-top: 0;
}
.sky-mega-menu li li a {color: #429BC7;
padding-top: 12px;
padding-bottom: 12px;
}
.sky-mega-menu li li > div {
top: 0;
margin: 0 0 0 8px;
}
.sky-mega-menu li li > div:after {
top: 0;
right: auto;
bottom: auto;
left: 100%;
width: 8px;
height: 100%;
}
.sky-mega-menu li li > div:before {
top: 22px;
right: auto;
bottom: auto;
left: 100%;
border-top: 5px solid transparent;
border-right: 5px solid rgba(255,255,255,0.9);
border-bottom: 5px solid transparent;
}
.sky-mega-menu li li:hover > div {
right: 100%;
}
.sky-mega-menu .right li > div {
margin: 0 8px 0 0;
-o-transform-origin-x: 100%;
-ms-transform-origin-x: 100%;
-moz-transform-origin-x: 100%;
-webkit-transform-origin-x: 100%;
}
.sky-mega-menu .right li > div:after {
right: auto;
left: 100%;
}
.sky-mega-menu .right li > div:before {
right: auto;
left: 100%;
border-right: none;
border-left: 5px solid rgba(255,255,255,0.9);
}
.sky-mega-menu .right li:hover > div {
right: auto;
left: 100%;
}
/**/
/* animations */
/**/
.sky-mega-menu-anim-slide li > div {
-o-transform: translate(0, 60px);
-ms-transform: translate(0, 60px);
-moz-transform: translate(0, 60px);
-webkit-transform: translate(0, 60px);
}
.sky-mega-menu-pos-bottom.sky-mega-menu-anim-slide li > div {
-o-transform: translate(0, -60px);
-ms-transform: translate(0, -60px);
-moz-transform: translate(0, -60px);
-webkit-transform: translate(0, -60px);
}
.sky-mega-menu-anim-slide li:hover > div {
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
}
.sky-mega-menu-anim-scale li > div {
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-webkit-transform: scale(0, 0);
}
.sky-mega-menu-anim-scale li:hover > div {
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
.sky-mega-menu-anim-flip {
perspective: 2000px;
-o-perspective: 2000px;
-moz-perspective: 2000px;
-webkit-perspective: 2000px;
}
.sky-mega-menu-anim-flip li > div {
transform-style: preserve-3d;
-o-transform: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-75deg);
-o-transform: rotateX(-75deg);
-moz-transform: rotateX(-75deg);
-webkit-transform: rotateX(-75deg);
}
.sky-mega-menu-anim-flip li:hover > div {
transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
}
.sky-mega-menu .grid-column2,
.sky-mega-menu .grid-container2 {
width: 127px;
}
.sky-mega-menu .grid-column3,
.sky-mega-menu .grid-container3 {
width: 196px;
}
اینم کد مربوط به IE7
.sky-mega-menu li > .grid-container3{
left: auto !important;
right: 0px;
direction: rtl;
z-index: 999;
overflow: visible !important;
}
.sky-mega-menu li {
padding: 0 !important;
}
.sky-mega-menu,.grid-container3,.grid-container3 div{
z-index: 9999 !important;
}
.grid-container4>ul,.grid-container4,.grid-container4>*{
background: #000 !important;
right:150px !important;
left: auto !important;
z-index: 999 !important;
}
.grid-container3{
position: absolute !important;
}
.searchsubmit {
position: relative;
z-index: 0 !important;
}
.sky-mega-menu li li:hover > div{
right: 150% !important;
left: auto !important;
direction: rtl;
z-index: 888;
}