水平导航条实例分享

水平导航条实例

    创建一个水平导航条，在鼠标移动到选项后修改背景颜色。

    实例

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background-color: #333;

}

li {

    float: left;

}

li a {

    display: block;

    color: white;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}

/*鼠标移动到选项上修改背景颜色 */

li a:hover {

    background-color: #111;

}

    激活/当前导航条实例

    在点击了选项后，我们可以添加"active"类来标准哪个选项被选中：

    实例

    .active{

        background-color:#4CAF50;

    }