rtl کردن منوی Steps

[bftarane]

سلام.
من سعی دارم منوی زیر رو rtl کنم.
http://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css
فعلاً به شکل زیر انجام دادم

#crumbs {
text-align: center;
}

#crumbs ul {
list-style: none;
display: inline-table;
}
#crumbs ul li {
display: inline;

}

#crumbs ul li a {
display: block;
float: left;
height: 50px;
background: #3498db;
text-align: center;
padding: 30px 40px 0 80px;
position: relative;
margin: 0 10px 0 0;

font-size: 20px;
text-decoration: none;
color: #fff;
}


#crumbs ul li:first-child a {
border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
display: none;
}

#crumbs ul li:last-child a {
padding-right: 80px;
border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}

#crumbs ul li a:hover {
background: #fa5ba5;
}
#crumbs ul li a:hover:after {
border-left-color: #fa5ba5;
}



#crumbs ul li a::after {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid #3498db;
position: absolute;
right: -10px;
top: 0;
z-index: 1;
}



#crumbs ul li a::before {
content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid #D4F2FF;
position: absolute;
left: -50px;
top: 0;
}

<div id="crumbs" dir="rtl">
<ul>
<li><a href="#1">مرحله 1: مشخصات</a></li>
<li><a href="#2">مرحله 2: امکانات</a></li>
<li><a href="#3">مرحله 3: موقعیت</a></li>
<li><a href="#4">مرحله 4: عکس و فیلم</a></li>
<li><a href="#5">Five</a></li>
</ul>
</div>
ولی نتیجه چندان رضایت بخش نیست.
مثلاً فلش‌ها جوری قرار گرفتن که باعث می شه به نظر بیاد متن وسط چین نیست در صورتی که هست.
و دیگه اینکه با hover روی منو، فلش به رنگ صورتی در نمی یاد و فقط اون تیکه مستطیل تغییر رنگ می ده.
لطفاً راهنمایی کنید.

یا اگه مورد مشابه این سراغ دارید که از نظر rtl مشکل نداشته باشه ممنون می شم معرفی کنید.

[دانیال دزفولی]

http://cdpn.io/GCoxF

[bftarane]

ممنون ولی در نمونه ای که گذاشتید فلش ها به سمت راست هستند در صورتی که در حالت Rtl باید به سمت چپ باشن.
من این کار رو در کدهایی که در بالا گذاشتم انجام دادم یعنی فلشها به سمت چپ ولی با مشکلاتی که در پست اول اشاره کردم مواجه شدم.
در لینک زیر می تونید ببینید.
http://codepen.io/anon/pen/KtFyA/

[s2/mri]

سلام

منو رو ضمیمه کردم . در راست چین کردن چنین منو هایی باید هواستون به after ها و before ها باشه!

117673

فایل منو117674




موفق باشید