Question

我正在寻找如何使用HTML和CSS制作水平导航菜单。我已经使用了好的例子provided here。

除此之外，我想使用线性渐变为菜单设置光泽效果的样式。我希望菜单是标准的一种光泽效果，然后更改为悬停的第二种光泽效果。

当我将线性渐变效果添加到悬停时，它可以根据需要工作。但是当我为标准菜单添加线性渐变效果时，结果会失真。

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%);
}

我希望有人能够提供帮助。

（我已经/ 注释掉了 /两个现有的背景颜色，因为我希望线性渐变颜色替换它们）。

谢谢。

Answer 1

您在浮动之后错过了分号（;）：在#nav li a中左侧

带有CSS的光泽效果导航菜单

1 个答案: