CSS是前端開發中必不可少的技術，它可以很好地控制和美化我們的網頁。下面我們來看看如何通過CSS來創建嵌套下拉列表。

/* 定義列表樣式 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
}
/* 當鼠標經過li時，顯示子列表 */
li:hover ul {
display: block;
}
/* 定義子列表樣式 */
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li > ul {
left: 0; /* 防止子列表移動 */
}
li > ul > li {
position: relative;
}
/* 定義鼠標懸停時子列表的樣式 */
li > ul > li:hover ul {
display: block;
left: 100%;
top: 0;
}

以上是CSS樣式的定義，下面是HTML代碼：

<ul>
<li>列表1
<ul>
<li>子列表1
<ul>
<li>子列表11</li>
<li>子列表12</li>
<li>子列表13</li>
</ul>
</li>
<li>子列表2
<ul>
<li>子列表21</li>
<li>子列表22</li>
<li>子列表23</li>
</ul>
</li>
<li>子列表3
<ul>
<li>子列表31</li>
<li>子列表32</li>
<li>子列表33</li>
</ul>
</li>
</ul>
</li>
<li>列表2</li>
<li>列表3</li>
</ul>

以上是HTML代碼，在<ul>標簽中嵌套了多個<li>標簽，每個<li>標簽都可以有自己的子列表，通過CSS樣式的定義，鼠標懸浮在父元素上時，子元素才會顯示出來。

以上就是關于嵌套下拉列表的CSS樣式和HTML代碼的介紹。CSS嵌套下拉列表可以提高網頁的可讀性和美觀性，是一個非常有用的技術。