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多級側邊欄導航菜單樣式，這些菜單項可以呈現出多級菜單的效果。