如何将LTR菜单更改为RTL MENU
1。 LTR：关于联系的家 2.转到RTL：联系家庭
你可以看到菜单CSS3代码如下：
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
.clearfix{*zoom:1}
.clearfix:before,
.clearfix:after{display:table;content:"";line-height:0}
.clearfix:after{clear:both}
.hide-text{font:0/0 a;
color:transparent;
text-shadow:none;
background-color:transparent;border:0}
.input-block-level{display:block;
width:100%;min-height:30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box}
body{padding-top:80px;
font-size:12px;
color:#34495e;
background:#f5f5f5;
direction: rtl;
}
body h1,body h2,body h3,body h4,body
.created{font-family:"Fjalla One";font-weight:normal}
body h5,body h6{margin:0}body h3,body h4{margin-top:0}
.btn{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;border:0;background-image:none;text-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.btn.btn-transparent{border:3px solid #fff;background:transparent;color:#fff}
.btn.btn-transparent:hover{border-color:rgba(255,255,255,0.5)}
.btn.btn-link{color:#2dcc70;padding:0}
.btn.btn-link:hover{text-decoration:none}
.btn-primary{background-color:#2dcc70}
.btn-primary:hover{background-color:#24a259}
a{color:#2dcc70;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}
a:hover,a:focus{color:#005580;text-decoration:none;outline:0}
.dropdown-menu
{
margin-top: -1px;
min-width: 180px;
}
body>section{padding:50px 0}body>section#slide-show{padding:0}
#recent-works{background:#2dcc70;color:#fff}
#recent-works .links>a{background:#fff;color:#2dcc70;text-shadow:none}
#clients{background:#fff}#clients h4{color:#999}
#clients .carousel{margin-bottom:0}
#clients .clients ul.thumbnails{margin:0}
#clients .clients ul.thumbnails>li{text-align:center;margin-bottom:0}
#clients .prev,#clients .next{color:#999}
.title{background:#2dcc70;color:#fff;padding:20px 0}
.center{text-align:center}
.box{background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.progress{margin-bottom:10px}
.progress,.progress .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-image:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;text-shadow:none;height:30px;line-height:30px}
.label,.badge{font-weight:300;font-size:90%}ul.breadcrumb{margin:12px 0 0;background:transparent}
ul.breadcrumb>li{text-shadow:none}
ul.breadcrumb>li>a,ul.breadcrumb>li .divider{color:#fff}
ul.breadcrumb>li.active{color:rgba(255,255,255,0.7)}
ul.tag-cloud li{display:inline-block;margin:0 0 2px 0}
.btn-social{border:0;color:#fff;text-shadow:0 1px rgba(0,0,0,0.5)}
.btn-social.btn-facebook{background:#4f7dd4}
.btn-social.btn-facebook:hover{background:#789bde}
.btn-social.btn-twitter{background:#5bceff}
.btn-social.btn-twitter:hover{background:#8eddff}
.btn-social.btn-linkedin{background:#21a6d8}
.btn-social.btn-linkedin:hover{background:#49b9e3}
.btn-social.btn-google-plus{background:#dc422b}
.btn-social.btn-google-plus:hover{background:#e36957}
.btn-social:hover{color:#fff}
header.navbar .navbar-inner
{
background: #fff !important;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
header #logo{width:220px;height:80px;background:url(../images/logo.png) no-repeat 0 50%}
header.navbar
{
margin-bottom: 0;
}
header.navbar .nav
{
margin-top: 20px;
direction:rtl;
}
header.navbar .nav > li
{
margin-left: 1px;
}
header.navbar .nav > li > a
{
padding-top: 10px;
padding-bottom: 10px;
color: #333;
font-family: "Fjalla One";
font-size: 14px;
text-transform: uppercase;
text-shadow: none;
}
header.navbar .nav>li>a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
header.navbar .nav>li.active>a,header.navbar .nav>li.active>a:hover{background:transparent;color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
header.navbar .nav>li.dropdown.open>a.dropdown-toggle{background:transparent;color:#2dcc70}
header.navbar .nav>li.login>a{border-left:1px solid #e5e5e5}
header .dropdown-menu
{
margin-top: 20px;
}
header .dropdown-menu:before
{
display: none !important;
}
.navbar .nav li.dropdown.open>.dropdown-toggle,.navbar .nav li.dropdown.active>.dropdown-toggle,.navbar .nav li.dropdown.open.active>.dropdown-toggle{background-color:transparent;color:#2dcc70}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover
{
color: #2dcc70;
}
.dropdown-menu
{
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 0;
border: 0;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a
{
background: #24a259;
}
.main-info{background-color:#fff;color:#999}
.main-info h4{color:#999}
.icon-medium{font-size:18px;width:18px;line-height:18px;text-align:center;display:inline-block;background:#2dcc70;padding:10px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;color:#fff}
.modal{border:0}
.modal#loginForm{width:600px;margin-left:-300px}
.modal .modal-header{border:0;padding:20px 20px 0}
.modal .modal-header>h4{font-weight:300;font-size:14px;color:#848484;text-transform:uppercase;margin:0}
.modal .modal-body{padding:20px}
.modal input[type="text"],.modal input[type="password"]{padding:5px 10px;min-height:30px;width:130px;margin-right:10px}
.modal .icon-remove{color:#848484;position:absolute;right:-5px;top:-5px;width:16px;height:16px;line-height:16px;text-align:center;display:block;background:#ebebeb;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;cursor:pointer}
.modal button{margin-left:10px;border:0}.gap{margin-bottom:50px}
.big-gap{margin-bottom:100px}.no-margin{margin:0;padding:0}
#services{background:#252525;color:#999}
#services h1,#services h2,#services h3,#services h4,#services h5,#services h6{color:#fff}
#main-contents{margin-top:20px}#main-contents .blog-news .created{font-size:18px;color:#2dcc70}
.registration-form{border:0;background-color:#fff;border-top:1px solid #f0f0f0;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);-moz-box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);padding:20px;display:inline-block}#bottom{background:#232323;color:#6f6f6f}
#bottom h4{margin-top:0;margin-bottom:15px}
#bottom h1,#bottom h2,#bottom h3,#bottom h4,#bottom h5,#bottom h6{color:#fff}
#bottom a{color:#6f6f6f}
#bottom a:hover{color:#2dcc70}
#bottom ul.address>li{position:relative;padding-left:20px;margin-top:10px}
#bottom ul.address>li:first-child{margin-top:0}
#bottom ul.address>li>i{position:absolute;top:3px;left:0}
#bottom ul.thumbnails{margin-bottom:0}
#bottom ul.thumbnails li{margin-bottom:5px}
ul.arrow,ul.arrow-double,ul.tick,ul.cross,ul.star,ul.rss{list-style:none;padding:0;margin:0}
ul.arrow li::before,ul.arrow-double li::before,ul.tick li::before,ul.cross li::before,ul.star li::before,ul.rss li::before,ul.arrow li::after,ul.arrow-double li::after,ul.tick li::after,ul.cross li::after,ul.star li::after,ul.rss li::after{font-family:FontAwesome;font-size:11px}
ul.arrow li::before, ul.arrow-double li::before, ul.tick li::before, ul.cross li::before, ul.star li::before, ul.rss li::before
{
margin-right: 5px;
}
ul.arrow li::before{content:"\f105"}
ul.arrow-double li::before{content:"\f101"}
ul.tick li::before{content:"\f00c"}
ul.cross li::before{content:"\f00d"}
ul.star li::before{content:"\f006"}
ul.rss li::before{content:"\f09e"}
#footer{background:#333;padding-top:15px;padding-bottom:15px;color:#666}
#footer a{color:#666}
#footer a:hover{color:#2dcc70}
#footer #gototop{height:40px;line-height:40px;width:40px;text-align:center;display:inline-block;background:#1d1d1d;font-size:24px;color:#fff}
#footer #gototop:hover{background:#2b2b2b;text-decoration:none}
#footer .cp{margin-top:11px}
ul.social{list-style:none;margin:10px 0 0;padding:0;display:inline-block}
ul.social>li{display:inline-block;margin:0 5px}
ul.social>li>a{font-size:24px;color:#666}
ul.social>li>a:hover{color:#999}
.box-border{padding:15px}
.accordion-group{background-color:#fff;border-top:1px solid #f0f0f0}
.accordion-heading .accordion-toggle{color:#666;font-weight:700}
.accordion-inner{border-top:0}
.blog .blog-item h2{margin-top:0}
.blog .blog-item .date span{display:block;text-align:center}
.blog .blog-item .date span.day{font-size:50px;line-height:50px;padding-top:10px;font-family:"Fjalla One",sans-serif}
.blog .blog-item .date span.month{font-size:18px}
.blog .blog-item .tag{margin-top:5px}
.blog .blog-item .avatar{margin-top:5px}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;min-height:50px;padding:0 15px;border:3px solid #ededed}select:focus,textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:#2dcc70;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-block-level{min-height:50px}textarea#message{padding:10px 15px;height:219px}.widget{margin-bottom:30px}.widget>h3{font-size:16px;margin-top:0}.widget h5{margin-top:10px}.widget .date{margin-top:5px;padding:8px 10px;background:#2dcc70}.widget .date>span{display:block;text-align:center;font-family:"Fjalla One";color:#fff}.widget .date>span.month{font-size:14px;line-height:14px;font-weight:700;text-transform:uppercase}.widget .date>span.day{font-size:18px;line-height:18px}
#pricing-table{margin-top:20px;margin-bottom:30px}
#pricing-table .plan{list-style:none;margin:0;padding:0;color:#fff}
#pricing-table .plan.featured{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}#pricing-table .plan>li{padding:10px 15px}#pricing-table .plan>li.plan-name{background:rgba(0,0,0,0.1)}#pricing-table .plan>li.plan-name h3{margin:10px 0}#pricing-table .plan>li.plan-action{padding:20px 0}#pricing-table .plan1{background:#1abc9c}#pricing-table .plan2{background:#e74c3c}#pricing-table .plan3{background:#3498db}#pricing-table .plan4{background:#9b59b6}ul.gallery{display:block;margin:-15px}ul.gallery.col-1 li{width:100%}ul.gallery.col-2 li{width:50%}ul.gallery.col-3 li{width:33.3333%}ul.gallery.col-4 li{width:25%}ul.gallery li{display:block;padding:0;margin:0;float:left}ul.gallery li .desc{margin:15px}ul.gallery li .preview{margin:15px;display:block;position:relative}ul.gallery li .preview .overlay{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,0.6);opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 300ms;-moz-transition:opacity 300ms;-o-transition:opacity 300ms;transition:opacity 300ms}ul.gallery li .preview .links{width:104px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-52px;opacity:0;filter:alpha(opacity=0);-webkit-transform:translate(0,-50px);-moz-transform:translate(0,-50px);-ms-transform:translate(0,-50px);-o-transform:translate(0,-50px);transform:translate(0,-50px);-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms}ul.gallery li .preview .links>a{width:50px;height:40px;line-height:40px;display:inline-block;text-align:center;background:#2dcc70;color:#fff;text-shadow:0 1px rgba(0,0,0,0.3);font-size:18px;margin:0 1px}ul.gallery li .preview:hover .overlay,ul.gallery li .preview:hover .links{opacity:1;filter:alpha(opacity=100)}ul.gallery li .preview:hover .links{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.faq{list-style:none;margin:0}ul.faq li{margin-top:30px}ul.faq li:first-child{margin-top:0}ul.faq li span.number{display:block;float:left;width:50px;height:50px;line-height:50px;text-align:center;background:#2dcc70;color:#fff;font-size:24px}ul.faq li>div{margin-left:70px}ul.faq li>div h3{margin-top:0}#error{text-align:center;margin-top:150px;margin-bottom:150px} <div class="nav-collapse collapse pull-right" >
<ul class="nav" >
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="career.html">Career</a></li>
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="registration.html">Registration</a></li>
<li class="divider"></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Use</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
<li class="login">
<a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a>
</li>
</ul>
</div><!--/.nav-collapse -->
AND you Can See the menu html Code as below:
可以在以下位置找到完整html网站的Zip文件： https://files.fm/down.php?i=kcteb6x9&n=Good18_OK2.zip 要么 https://ufile.io/2dqow
<div class="nav-collapse collapse pull-right" >
<ul class="nav" >
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="career.html">Career</a></li>
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="registration.html">Registration</a></li>
<li class="divider"></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Use</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
<li class="login">
<a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a>
</li>
</ul>
</div><!--/.nav-collapse -->
最诚挚的问候。
答案 0 :(得分：0)
为.nav
.nav {
direction: rtl; /* Add direction for menu */
display: flex;
list-style: none;
}
.nav>li {
padding: .5em;
}<div class="nav-collapse collapse pull-right">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="career.html">Career</a></li>
<li><a href="blog-item.html">Blog Single</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="404.html">404</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="registration.html">Registration</a></li>
<li class="divider"></li>
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Use</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
<li class="login">
<a data-toggle="modal" href="#loginForm"><i class="icon-lock"></i></a>
</li>
</ul>
</div>
<!--/.nav-collapse -->