帶CSS的光澤效果導航菜單

我正在尋找如何製作HTML和CSS的水平導航菜單。我已經利用了這個好例子provided here。帶CSS的光澤效果導航菜單

除此之外，我想使用線性漸變來設置帶有光澤效果的菜單。我希望菜單是標準的一種光澤效果，然後改爲懸浮的第二種光澤效果。

當我將線性漸變效果添加到懸停時，它會按需要工作。但是當我爲標準菜單添加線性梯度效果時，結果會失真。

的HTML代碼如下：

<div id="nav"> 
    <ul> 
     <li><a href="#">Home</a> 
     </li> 
     <li><a href="#">Crawler</a> 
     </li> 
     <li><a href="#">Visual Analytics</a> 
     </li> 
    </ul> 
</div>

的CSS代碼如下：

#nav { 
    list-style:none; 
    font-weight:bold; 
    margin-bottom:10px; 
    width:100%; 
    text-align: center; 
} 
#nav ul { 
    list-style-type: none; 
    padding: 0; 
    display:inline-block; 
} 
#nav li { 
    margin:0px; 
    display:inline; 
} 
#nav li a { 
    padding: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #FFFFFF; 
    /*background-color: #086ba9;*/ 
    float:left 
    background-image: linear-gradient(#484848 0%, #484848 50%, #383838 50%, #383838 100%); 
} 
#nav li a:hover { 
    color: #FFFFFF; 
    /*background-color: #35af3b;*/ 
    background-image: linear-gradient(#33adff 0%, #33adff 50%, #0099ff 50%, #0099ff 100%); 
}

我希望有人能夠幫助。

（我有/ 註釋掉了 /兩個現有的背景顏色，因爲我想用線性漸變顏色來代替它們）。

謝謝。

來源

2014-03-28 JackC

你是什麼意思的標準菜單？ – fnostro

用於我的導航菜單中的鏈接未被懸停時。 – JackC

浮動後錯過了分號：左#nav li a

來源

2014-03-28 21:40:26 Vel

帶CSS的光澤效果導航菜單

回答

相關問題