CSS 左側導航是一種常用的網頁設計方式。下面是一個基本的左側導航的 HTML 結構：

<div class="sidebar">
<ul>
<li><a href="#">導航 1</a></li>
<li><a href="#">導航 2</a></li>
<li><a href="#">導航 3</a></li>
<li><a href="#">導航 4</a></li>
</ul>
</div>

其中，class 屬性為 "sidebar" 的 div 元素定義了左側導航的容器， ul 元素包含了各個導航選項。

接下來是這個左側導航的 CSS 樣式：

.sidebar {
width: 200px;
background-color: #f0f0f0;
padding: 20px;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin: 0;
padding: 8px 0;
}
.sidebar li a {
text-decoration: none;
color: #333;
}
.sidebar li a:hover {
color: #fff;
background-color: #333;
}

CSS 中， .sidebar 選擇器定義了左側導航容器的樣式，其中 width 屬性決定了寬度。

接下來， .sidebar ul 選擇器定義了 ul 元素的樣式， list-style: none; 消除了默認的列表樣式， margin 和 padding 均設為 0。

接著是 .sidebar li 選擇器，它定義了每個導航選項 li 元素的樣式， margin: 0; padding: 8px 0; 決定了選項之間的間距，同時設置了上下內邊距。

最后，則是 .sidebar li a 和 .sidebar li a:hover 選擇器，定義了鏈接顏色和當鼠標指針懸停在上面時的樣式。