css多级侧边栏导航菜单 |css 给圆形填充颜色

/* 多级侧边栏导航菜单样式 */
.sidebar-menu{
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 200px;
background-color: #f5f5f5;
padding: 20px;
}
.sidebar-menu ul{
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-menu a{
display: block;
padding: 10px 0;
color: #333;
text-decoration: none;
}
.sidebar-menu li{
position: relative;
}
.sidebar-menu li:hover>ul{
display: block;
}
.sidebar-menu ul ul{
display: none;
position: absolute;
left: 100%;
top: 0;
width: 200px;
background-color: #fff;
}
.sidebar-menu ul ul li{
position: relative;
}
.sidebar-menu ul ul li:hover>ul{
display: block;
}
.sidebar-menu ul ul ul{
display: none;
position: absolute;
left: 100%;
top: 0;
width: 200px;
background-color: #fff;
}

上述代码包含了多级侧边栏导航菜单的基本样式，其中ul表示列表元素，li表示列表项，a表示链接。每个列表项可以包含一个子菜单，子菜单也可以包含子菜单，因此可以支持多级菜单。

使用该样式创建多级侧边栏菜单时，只需要编写对应的HTML代码，并在ul标签中嵌套写入子菜单即可实现。例如：

<div class="sidebar-menu">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a><ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a><ul>
<li><a href="#">孙菜单1</a></li>
<li><a href="#">孙菜单2</a></li>
</ul></li>
</ul></li>
</ul>
</div>

该HTML代码将创建一个包含两个菜单项的菜单，其中第二个菜单项有两个子菜单项，第二个子菜单项又有两个孙菜单项。利用CSS多级侧边栏导航菜单样式，这些菜单项可以呈现出多级菜单的效果。