CSS左导航多级目录是网站和应用程序中常见的元素之一。这种导航栏帮助用户快速找到他们需要的信息。它们经常被用来展示网站的主要段落或文章。

/* CSS左导航的基本样式 */
.sidebar {
width: 200px;
margin-right: 20px;
padding: 20px;
background-color: #f5f5f5;
float: left;
}
/* 一级列表项 */
.sidebar .nav >li {
margin-bottom: 10px;
}
/* 二级列表项 */
.sidebar .nav >li ul >li {
margin-bottom: 5px;
padding-left: 20px;
}
/* 三级列表项 */
.sidebar .nav >li ul >li ul >li {
margin-bottom: 5px;
padding-left: 40px;
}
/* 链接样式 */
.sidebar .nav a {
color: #000;
text-decoration: none;
}
/* 当链接处于悬停状态时 */
.sidebar .nav a:hover {
text-decoration: underline;
}

上面的CSS代码展示了如何创建基本的多级导航栏。内层列表项的样式是基于外层列表项的样式来定义的。这个样式框架很简单，可以根据需要进行修改。

HTML代码也很直截了当。一级列表项被定义为无序列表(<ul>)，二级和三级列表项是嵌套在一级列表项中的另外的无序列表。

<div class="sidebar">
<ul class="nav">
<li>
<a href="#">一级菜单项</a>
<ul>
<li><a href="#">二级菜单项</a></li>
<li>
<a href="#">二级菜单项</a>
<ul>
<li><a href="#">三级菜单项</a></li>
<li><a href="#">三级菜单项</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

使用CSS创建左导航多级目录实际上并不难，关键是你需要正确的HTML结构和一些CSS知识。如果你需要创建一个类似的导航栏，请参考上面给出的代码。