如何將菜單文本指向右側並使懸停鏈接轉到左側

我有couponia coupons online shop template腳本顯示簡單頁面。如何將菜單文本指向右側並使懸停鏈接轉到左側

菜單鏈接文本是針對左當上述哈弗，它給稍微向右移動。這樣的：

我想oppeset，我希望文字鏈接被引導到正確的和的鏈接懸停去左。這樣的：

這裏是有關HTML代碼：

 <div class="col-md-3"> 
      <aside class="sidebar-left"> 
       <h3 class="mb20">I am Looking For</h3> 
       <ul class="nav nav-tabs nav-stacked nav-coupon-category nav-coupon-category-left"> 
        <li><a href="#"><i class="fa fa-cutlery"></i>Food & Drink<span>40</span></a> 
        </li> 
        <li><a href="#"><i class="fa fa-calendar"></i>Events</a> 
        </li> 
        <li><a href="#"><i class="fa fa-female"></i>Beauty</a> 
        </li> 
        <li><a href="#"><i class="fa fa-bolt"></i>Fitness</a> 
        </li> 
        <li><a href="#"><i class="fa fa-headphones"></i>Electronics</a> 
        </li> 
        <li><a href="#"><i class="fa fa-image"></i>Furniture</a> 
        </li> 
        <li><a href="#"><i class="fa fa-umbrella"></i>Fashion</a> 
        </li> 
        <li><a href="#"><i class="fa fa-shopping-cart"></i>Shopping</a> 
        </li> 
        <li><a href="#"><i class="fa fa-home"></i>Home & Graden</a> 
        </li> 
        <li><a href="#"><i class="fa fa-plane"></i>Travel</a> 
        </li> 
       </ul> 
      </aside> 
     </div>

這裏是CSS代碼：

.nav-tabs.nav-stacked.nav-coupon-category { 
    margin-bottom: 30px; 
    -webkit-box-shadow: 0 3px 1px rgba(0,0,0,0.15); 
    box-shadow: 0 3px 1px rgba(0,0,0,0.15); 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a { 
    text-transform: uppercase; 
    font-size: 13px; 
    z-index: 1; 
    -webkit-border-radius: 0; 
    border-radius: 0; 
    background: #fff; 
    border-left: none; 
    border-right: none; 
    border: none; 
    -webkit-transition: 0.2s; 
    -moz-transition: 0.2s; 
    -o-transition: 0.2s; 
    -ms-transition: 0.2s; 
    transition: 0.2s; 
    height: 40px; 
    line-height: 40px; 
    padding: 0px 0px 0px 55px; 
    position: relative; 
    margin: 0; 
    color: #666; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa { 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    font-size: 18px; 
    position: absolute; 
    display: block; 
    width: 40px; 
    height: 40px; 
    background: #fbfbfb; 
    top: 0; 
    left: 0; 
    text-align: center; 
    line-height: 40px; 
    border-right: 1px solid #ededed; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa:before { 
    opacity: 0.65; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
    filter: alpha(opacity=65); 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a span { 
    margin-left: 10px; 
    color: #bfbfbf; 
    padding: 1px 7px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    font-size: 10px; 
    -webkit-transition: 0.2s; 
    -moz-transition: 0.2s; 
    -o-transition: 0.2s; 
    -ms-transition: 0.2s; 
    transition: 0.2s; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover { 
    background: #fbfbfb; 
    padding-left: 65px; 
    color: #2a8fbd; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa { 
    background: #2a8fbd; 
    color: #fff; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa:before { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover span { 
    background: #2a8fbd; 
    color: #fff; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li:first-child a { 
    border-top: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > li:last-child a { 
    border-bottom: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a { 
    z-index: 2; 
    background: #2a8fbd; 
    color: #fff; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a span { 
    color: #fff; 
    background: rgba(0,0,0,0.5); 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa { 
    background: #298dba; 
    color: #fff; 
    border-right: 1px solid #2681aa; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa:before { 
    opacity: 1; 
    -ms-filter: none; 
    filter: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover { 
    background: #2a8fbd; 
    color: #fff; 
    padding-left: 55px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover span { 
    background: rgba(0,0,0,0.5); 
} 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:before { 
    content: ''; 
    position: absolute; 
    height: 28px; 
    width: 28px; 
    top: 6px; 
    right: -15px; 
    background: #2a8fbd; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
    display: block; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right { 
    margin-right: 0; 
    margin-left: 30px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a { 
    padding: 0px 0px 0px 20px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a [class^="fa fa-"] { 
    left: auto; 
    right: 0; 
    border-left: 1px solid #ededed; 
    border-right: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a:hover { 
    padding-left: 35px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a [class^="fa fa-"] { 
    border-left: 1px solid #2681aa; 
    border-right: none; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:before { 
    right: auto; 
    left: -15px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:hover { 
    padding-left: 20px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline { 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    margin: 0; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li { 
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.15); 
    box-shadow: 0 1px 0 rgba(0,0,0,0.15); 
    float: left; 
    display: block; 
    margin-right: 10px; 
    margin-bottom: 10px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li > a { 
    border-bottom: none !important; 
    padding-right: 15px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li > a:hover { 
    padding-left: 55px; 
} 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li.active > a:before { 
    display: none; 
}

在這裏看到完整的css文件：

Styles.css

Bootstrap.css

活一個，你可以看到：Here

它使用Bootstarp我試圖用CSS，但沒有取得成功發揮。任何想法如何預製？

來源

2016-08-28 StackBuck

星巴克，我認爲我提供了能滿足你需求的答案。 –

嘗試使用

<div class="col-md-3" dir="rtl">

來源

2016-08-28 17:33:09 aquariens

不工作。它將整個鏈接文本放在右邊並禁用輕微移動。 – StackBuck

你只需要從

<ul class="nav nav-tabs nav-stacked nav-coupon-category nav-coupon-category-left">

更改爲

<ul class="nav nav-tabs nav-stacked nav-coupon-category nav-coupon-category-right">

UL標籤種類這是例如從您提供的代碼：

.nav-tabs.nav-stacked.nav-coupon-category { 
 
    margin-bottom: 30px; 
 
    -webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a { 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    z-index: 1; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    background: #fff; 
 
    border-left: none; 
 
    border-right: none; 
 
    border: none; 
 
    -webkit-transition: 0.2s; 
 
    -moz-transition: 0.2s; 
 
    -o-transition: 0.2s; 
 
    -ms-transition: 0.2s; 
 
    transition: 0.2s; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding: 0px 0px 0px 55px; 
 
    position: relative; 
 
    margin: 0; 
 
    color: #666; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -o-transform: translate3d(0, 0, 0); 
 
    -ms-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    font-size: 18px; 
 
    position: absolute; 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #fbfbfb; 
 
    top: 0; 
 
    left: 0; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    border-right: 1px solid #ededed; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa:before { 
 
    opacity: 0.65; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
 
    filter: alpha(opacity=65); 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a span { 
 
    margin-left: 10px; 
 
    color: #bfbfbf; 
 
    padding: 1px 7px; 
 
    -webkit-border-radius: 2px; 
 
    border-radius: 2px; 
 
    font-size: 10px; 
 
    -webkit-transition: 0.2s; 
 
    -moz-transition: 0.2s; 
 
    -o-transition: 0.2s; 
 
    -ms-transition: 0.2s; 
 
    transition: 0.2s; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover { 
 
    background: #fbfbfb; 
 
    padding-left: 65px; 
 
    color: #2a8fbd; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa:before { 
 
    opacity: 1; 
 
    -ms-filter: none; 
 
    filter: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover span { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li:first-child a { 
 
    border-top: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > li:last-child a { 
 
    border-bottom: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a { 
 
    z-index: 2; 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a span { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa { 
 
    background: #298dba; 
 
    color: #fff; 
 
    border-right: 1px solid #2681aa; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa:before { 
 
    opacity: 1; 
 
    -ms-filter: none; 
 
    filter: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
    padding-left: 55px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover span { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 28px; 
 
    width: 28px; 
 
    top: 6px; 
 
    right: -15px; 
 
    background: #2a8fbd; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    display: block; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right { 
 
    margin-right: 0; 
 
    margin-left: 30px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a { 
 
    padding: 0px 0px 0px 20px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a [class^="fa fa-"] { 
 
    left: auto; 
 
    right: 0; 
 
    border-left: 1px solid #ededed; 
 
    border-right: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a:hover { 
 
    padding-left: 35px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a [class^="fa fa-"] { 
 
    border-left: 1px solid #2681aa; 
 
    border-right: none; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:before { 
 
    right: auto; 
 
    left: -15px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:hover { 
 
    padding-left: 20px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline { 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    margin: 0; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li { 
 
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 
    float: left; 
 
    display: block; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li > a { 
 
    border-bottom: none !important; 
 
    padding-right: 15px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li > a:hover { 
 
    padding-left: 55px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li.active > a:before { 
 
    display: none; 
 
}

<div class="col-md-3"> 
 
    <aside class="sidebar-right"> 
 
    <h3 class="mb20">I am Looking For</h3> 
 
    <ul class="nav nav-tabs nav-stacked nav-coupon-category nav-coupon-category-right"> 
 
     <li><a href="#"><i class="fa fa-cutlery"></i>Food & Drink<span>40</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-calendar"></i>Events</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-female"></i>Beauty</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-bolt"></i>Fitness</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-headphones"></i>Electronics</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-image"></i>Furniture</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-umbrella"></i>Fashion</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-shopping-cart"></i>Shopping</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-home"></i>Home & Graden</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-plane"></i>Travel</a> 
 
     </li> 
 
    </ul> 
 
    </aside> 
 
</div>

來源

2016-08-28 17:43:12

我試過了，它不起作用。它只是把圖標放在右邊。 – StackBuck

我不能給你完整的解決方案，直到我沒有你的代碼，但我認爲它解決了一半的問題 –

我添加了鏈接到完整的CSS文件 – StackBuck

的<div class="col-md-3" dir="rtl">的作品，但它不會做這件事。

所有你需要做的就是添加這個CSS。添加一個轉換會使整體結果看起來更好。

li:hover { 
    margin-right: 10px; 
    transition: 0.5s; 
}

爲了使您的div停留在頁面左側，添加此代碼。您可以根據需要修改像素。

.col-md-3 { 
    margin-right: 400px; 
}

此外，margin-left: 70px;上i使它更接近的結果。您可以爲每個i設置自定義margin-left屬性。這是完整的代碼片段。

i { 
 
    margin-left: 70px; 
 
} 
 
.col-md-3 { 
 
    margin-right: 400px; 
 
} 
 
.nav-tabs.nav-stacked.nav-coupon-category { 
 
    margin-bottom: 30px; 
 
    -webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a { 
 
    text-transform: uppercase; 
 
    font-size: 13px; 
 
    z-index: 1; 
 
    -webkit-border-radius: 0; 
 
    border-radius: 0; 
 
    background: #fff; 
 
    border-left: none; 
 
    border-right: none; 
 
    border: none; 
 
    -webkit-transition: 0.2s; 
 
    -moz-transition: 0.2s; 
 
    -o-transition: 0.2s; 
 
    -ms-transition: 0.2s; 
 
    transition: 0.2s; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding: 0px 0px 0px 55px; 
 
    position: relative; 
 
    margin: 0; 
 
    color: #666; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    -moz-transform: translate3d(0, 0, 0); 
 
    -o-transform: translate3d(0, 0, 0); 
 
    -ms-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    font-size: 18px; 
 
    position: absolute; 
 
    display: block; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: #fbfbfb; 
 
    top: 0; 
 
    left: 0; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    border-right: 1px solid #ededed; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a .fa:before { 
 
    opacity: 0.65; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 
 
    filter: alpha(opacity=65); 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a span { 
 
    margin-left: 10px; 
 
    color: #bfbfbf; 
 
    padding: 1px 7px; 
 
    -webkit-border-radius: 2px; 
 
    border-radius: 2px; 
 
    font-size: 10px; 
 
    -webkit-transition: 0.2s; 
 
    -moz-transition: 0.2s; 
 
    -o-transition: 0.2s; 
 
    -ms-transition: 0.2s; 
 
    transition: 0.2s; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover { 
 
    background: #fbfbfb; 
 
    padding-left: 65px; 
 
    color: #2a8fbd; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover .fa:before { 
 
    opacity: 1; 
 
    -ms-filter: none; 
 
    filter: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li > a:hover span { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li:first-child a { 
 
    border-top: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > li:last-child a { 
 
    border-bottom: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a { 
 
    z-index: 2; 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a span { 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa { 
 
    background: #298dba; 
 
    color: #fff; 
 
    border-right: 1px solid #2681aa; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a .fa:before { 
 
    opacity: 1; 
 
    -ms-filter: none; 
 
    filter: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover { 
 
    background: #2a8fbd; 
 
    color: #fff; 
 
    padding-left: 55px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:hover span { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category > .active > a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    height: 28px; 
 
    width: 28px; 
 
    top: 6px; 
 
    right: -15px; 
 
    background: #2a8fbd; 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    display: block; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right { 
 
    margin-right: 0; 
 
    margin-left: 30px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a { 
 
    padding: 0px 0px 0px 20px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a [class^="fa fa-"] { 
 
    left: auto; 
 
    right: 0; 
 
    border-left: 1px solid #ededed; 
 
    border-right: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > li > a:hover { 
 
    padding-left: 35px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a [class^="fa fa-"] { 
 
    border-left: 1px solid #2681aa; 
 
    border-right: none; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:before { 
 
    right: auto; 
 
    left: -15px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-right > .active > a:hover { 
 
    padding-left: 20px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline { 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    margin: 0; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li { 
 
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
 
    float: left; 
 
    display: block; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li > a { 
 
    border-bottom: none !important; 
 
} 
 

 
.nav-tabs.nav-stacked.nav-coupon-category.nav-coupon-category-inline > li.active > a:before { 
 
    display: none; 
 
} 
 
li:hover { 
 
    margin-right: 10px; 
 
    transition: 0.5s; 
 
} 
 
a { 
 
    margin-right: 10px; 
 
}

<div class="col-md-3" dir="rtl"> 
 
    <aside class="sidebar-left"> 
 
    <h3 class="mb20">I am Looking For</h3> 
 
    <ul class="nav nav-tabs nav-stacked nav-coupon-category nav-coupon-category-left"> 
 
     <li><a href="#"><i class="fa fa-cutlery"></i>Food & Drink<span>40</span></a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-calendar"></i>Events</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-female"></i>Beauty</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-bolt"></i>Fitness</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-headphones"></i>Electronics</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-image"></i>Furniture</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-umbrella"></i>Fashion</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-shopping-cart"></i>Shopping</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-home"></i>Home & Graden</a> 
 
     </li> 
 
     <li><a href="#"><i class="fa fa-plane"></i>Travel</a> 
 
     </li> 
 
    </ul> 
 
    </aside> 
 
</div>

來源

2016-08-28 17:46:37

這是完全錯誤的，圖標仍然在左側 –

看到他提供的圖像並仔細閱讀 –

我現在解決了整個問題。 –

如何將菜單文本指向右側並使懸停鏈接轉到左側

回答

相關問題