带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的光泽效果导航菜单

回答

相关问题