CSS自動加載列表是一種很常用的網頁開發技術，可以在頂部或底部的導航欄中自動加載出子菜單或下拉菜單，使得網頁看起來更加整潔和美觀。

如下是一個簡單的CSS自動加載列表的示例：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a>
<ul>
<li><a href="#">國內</a></li>
<li><a href="#">國際</a></li>
</ul>
</li>
<li><a href="#">產品</a>
<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>
</li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

這個列表有一個父級菜單，包含五個子級菜單以及兩個下拉菜單。其中，首頁、關于我們和聯系我們沒有下拉菜單，而新聞和產品有下拉菜單。

這個自動加載列表的CSS樣式如下：

nav {
width: 100%;
background: #333;
color: #fff;
font-size: 18px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
color: #fff;
display: block;
padding: 10px 20px;
text-decoration: none;
}
nav ul li ul {
position: absolute;
top: 41px;
left: 0;
background: #333;
display: none;
}
nav ul li ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}

其中，nav表示導航欄，ul表示無序列表，li表示列表項，a表示鏈接。各種CSS樣式用來控制菜單的樣式、排列方式等等。

本文介紹了CSS自動加載列表的使用方法和樣式設置，希望讀者可以通過本文的介紹掌握此技術，提高網頁開發的效率和效果。