在Web開發中，樹形菜單的應用非常廣泛。有時候，我們希望樹形菜單能夠像滑動門一樣展開和關閉，這時候就需要用到純CSS的技巧來實現。接下來，我們就來一步步實現樹形菜單滑動門效果。

首先，我們需要一個基本的HTML結構，包含樹形菜單的列表：

<ul>
<li>菜單1
<ul>
<li>子菜單1</li>
<li>子菜單2</li>
</ul>
</li>
<li>菜單2
<ul>
<li>子菜單3</li>
<li>子菜單4</li>
</ul>
</li>
</ul>

接下來，我們需要用CSS來隱藏子菜單。這里的關鍵是使用定位和z-index屬性控制顯示和隱藏。具體實現如下：

/* 默認隱藏子菜單 */
ul ul {
position: absolute;
top: 0;
left: -9999px;
z-index: -1;
}
/* 當父菜單被hover時，顯示子菜單 */
ul li:hover > ul {
left: 0;
z-index: 1;
}

上面的代碼中，我們將子菜單的left屬性設置為-9999px，這樣就將其隱藏起來。然后，當父菜單被hover時，我們將其left屬性設置為0，這樣就能夠顯示出子菜單來。

最后，我們可以利用CSS3的過渡效果讓樹形菜單滑動門更加平滑美觀。具體代碼如下：

/* 添加過渡效果 */
ul ul {
/* 省略其他屬性 */
transition: all 0.2s ease-in-out;
}

至此，我們已經成功實現了純CSS的樹形菜單滑動門效果。實際開發中，我們還可以根據具體需求進行一些樣式的調整，比如添加動畫效果、改變顏色等等。