CSS是一種專門用于美化網頁的語言，其靈活多樣的樣式表使得網頁的設計更加美觀和易于理解。在網頁開發中，制作目錄是一個很常見的需求。下面我們來看一下如何用CSS制作目錄。

/* 第一步：給目錄添加樣式 */
ul.menu{
list-style:none;  /* 去掉默認的列表樣式 */
padding:0;  /* 去掉內部的填充 */
margin:0;  /* 去掉外部的邊距 */
}
/* 第二步：設置目錄項的樣式 */
ul.menu li{
padding:5px;  /* 設置內部填充 */
margin:0;  /* 去掉外部的邊距 */
border-bottom:1px solid #ccc;  /* 添加底部邊框 */
}
/* 第三步：設置目錄項的鼠標懸浮效果 */
ul.menu li:hover{
background:#f5f5f5;  /* 設置背景顏色 */
}
/* 第四步：設置目錄項鏈接的樣式 */
ul.menu li a{
text-decoration:none;  /* 去掉下劃線 */
color:#333;  /* 設置文字顏色 */
}
/* 第五步：設置當前頁面所在的目錄項的樣式 */
ul.menu li.current{
background:#f5f5f5;  /* 設置背景顏色 */
}

通過以上CSS代碼，我們設置了目錄的樣式、目錄項的樣式、目錄項的鼠標懸浮效果、目錄項鏈接的樣式以及當前頁面所在的目錄項的樣式。

在HTML代碼中，我們需要使用<ul>和<li>標簽來生成目錄。如下所示：

<ul class="menu">
<li class="current"><a href="#">首頁</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">解決方案</a></li>
<li><a href="#">關于我們</a></li>
</ul>

在使用以上HTML代碼時，我們需要注意給目錄項設置正確的class屬性，以便CSS代碼可以正確地應用樣式。

通過以上步驟，我們可以比較簡單地制作一個美觀的目錄。當然，如果你想要更加復雜的效果，也可以通過CSS的高級應用來實現。希望這篇文章對你有所幫助。