css一级菜单和二级菜单栏

CSS一级菜单和二级菜单栏是网站导航中经常使用的功能，通过CSS样式可以很方便地实现这个功能。

对于一级菜单栏，我们可以通过设置ul标签的样式来实现。下面是一个例子：

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    height: 50px;
    line-height: 50px;
}

li {
    float: left;
    width: 200px;
    text-align: center;
}

li:hover {
    background-color: #555;
    color: white;
}

a {
    display: block;
    color: #333;
    text-decoration: none;
} 

通过上面的CSS样式，我们可以实现一个简单的一级菜单栏。接下来，我们需要为一些菜单项添加二级菜单栏。下面是一个例子：

ul li ul {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li:hover ul {
    display: block;
}

ul li ul li {
    float: none;
}

ul li ul li a {
    padding: 10px 15px;
    color: #333;
    display: block;
    text-decoration: none;
}

ul li ul li:hover {
    background-color: #555;
    color: white;
} 

通过上面的样式，我们可以实现一个简单的带有二级菜单栏的一级菜单。如果我们想要实现更复杂的效果，可以根据自己的需求修改CSS样式。