定製引導導航與CSS

我有下面的代碼的HTML和CSS代碼中創建導航中心，定製引導導航與CSS

HTML Code

<nav class="navbar navbar-inverse navbar-fixed-top navbar-inner" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">PROFILE</a></li> 
      <li><a href="#">BUSINESS SOLUTIONS</a></li> 
      <li><a href="#">PRODUCTS</a></li> 
      <li><a href="#">PARTNERS</a></li> 
      <li><a href="#">CAREERS</a></li> 
      <li><a href="#">NEWS</a></li> 
      <li><a href="#">CONTACT</a></li> 
     </ul> 
     </div> 
    </div> 
    </nav>

CSS code

.navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; } 
.navbar-inner { text-align:center; }

它看起來像這樣 enter image description here

但我看起來像Home活躍和懸停。我該怎麼做 enter image description here

當我選擇菜單時，我正在尋找小紅色下劃線，當我將鼠標懸停在它上面時，我正在尋找同樣的東西。

來源

2015-04-02 Milind

您可以請稍微擴展一下解釋。此外，圖像太小。我幾乎看不到紅線，那是你想要的嗎？ – sinanspd 2015-04-02 05:31:05

是的當菜單被選中時，只需要小紅色下劃線，當我將鼠標懸停在上面時，同樣的東西。 – Milind 2015-04-02 05:36:00

你需要兩個選擇器在css'ul.nav li.active a'和'ul.nav li：hover a'，然後設置'text-decoration：underline;' – 2015-04-02 05:51:31

試試這個，

.nav li.active a,.nav li:hover a{ 
background:none !important; 
    box-shadow:none !important; 

}

Working Demo

更新的代碼

.nav li.active a span,.nav li:hover a span{ 
    border-bottom:1px solid red; 
    display:block 
}

Updated Fiddle Demo

來源

2015-04-02 05:52:29 Logz

短，但我已經做了，但我正在看下面的文本不低於和短於文本像50％，並在中心 – Milind 2015-04-02 05:58:09

所以，你提供的代碼我做到了。如果您想進行任何更改，請讓我知道我將進行必要的更改。關鍵的想法是使用：

border-bottom

和

li:hover

性能。

這裏是小提琴： http://jsfiddle.net/L7x85dp5/

來源

2015-04-02 05:49:25 sinanspd

我已經完成了，但是我正在尋找下劃線文本沒有那麼多，比文本像50％和在中心 – Milind 2015-04-02 05:57:21

定製引導導航與CSS

回答

相關問題