css 垂直导航栏 带边界

CSS垂直导航栏是网页设计中常见的一种导航栏风格，它可以垂直排列导航菜单，同时也能为菜单添加边界。

.nav{
        margin: 0;
        padding: 0;
        list-style: none;
        border-right: 1px solid #ccc;
}
.nav li{
        position: relative;
        display: block;
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        cursor: pointer;
}
.nav li:hover{
        background-color: #ccc;
}
.sub-nav{
        position: absolute;
        top: 0;
        left: 200px;
        width: 200px;
        display: none;
        border: 1px solid #ccc;
}
.nav li:hover .sub-nav{
        display: block;
}
.sub-nav li{
        display: block;
        width: 200px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #fff;
}
.sub-nav li:hover{
        background-color: #f2f2f2;
}
    

以上代码中，我们为导航栏添加了一个边界，使其看起来更加清晰。通过设置每个列表项的高度、宽度、背景色以及字体样式等来控制导航栏的外观。同时，通过设置子菜单的样式和其父元素（即列表项）的 :hover 伪类，可以实现子菜单在鼠标悬停时显示的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！