CSS中经常会使用左侧可折叠导航来方便用户浏览网页内容，下面我们来详细了解一下它的实现方法。

/* HTML代码 */
<div class="nav"><ul><li>首页</li><li>产品中心
<ul><li>产品1</li><li>产品2</li></ul></li><li>新闻中心</li><li>关于我们</li></ul></div>/* CSS代码 */
.nav {
width: 200px;
background-color: #f6f6f6;
position: fixed;
top: 0;
bottom: 0;
left: 0;
}
.nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav ul li {
padding: 10px;
}
.nav ul li:hover {
background-color: #eaeaea;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}

以上代码中，我们使用了一个div容器来包裹ul列表，然后给这个容器设置了固定定位，这样就可以让导航始终停留在页面的左侧。接下来，我们对ul列表和li元素进行了一些基本样式的设置，包括样式重置，内边距和外边距的清除等等。在li元素上我们还使用了:hover伪类来实现鼠标悬停效果。

接下来，在li元素下我们添加了一个子ul列表，用来存放二级菜单选项。同时，初始时我们将二级菜单列表设为不可见，当用户鼠标悬停在一级菜单上时，就通过:hover伪类将二级菜单列表显示出来。这样就实现了一个简单的左侧可折叠导航效果。