在網頁設計中，三級菜單是非常常見的需求之一。它可以使網站結構更加清晰，讓用戶更快地找到想要的信息。而Javascript作為前端開發的基礎語言之一，也提供了多種實現三級菜單的方式。

最簡單的方式就是利用CSS實現三級菜單的顯示與隱藏。我們可以使用:hover屬性控制第一級菜單的下拉，同時使用子選擇器實現第二、第三級菜單的顯示。具體代碼如下所示：

<nav>
<ul>
<li><a href="#">菜單1</a>
<ul>
<li><a href="#">子菜單1</a>
<ul>
<li><a href="#">三級菜單1</a></li>
<li><a href="#">三級菜單2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
</style>

然而，該方式存在一個缺點，即當第三級菜單過多時，它們將會堆積在一起，很難進行區分。因此，另一個常見的方式就是利用Javascript實現三級菜單的縮放與展開。我們可以使用DOM操作動態地創建第二、第三級菜單，并在用戶點擊時進行展開。具體代碼如下所示：

<nav>
<ul>
<li><a href="#">菜單1</a></li>
<li><a href="#">菜單2</a></li>
<li><a href="#">菜單3</a>
<ul>
<li><a href="#">子菜單1</a></li>
<li><a href="#">子菜單2</a>
<ul>
<li><a href="#">三級菜單1</a></li>
<li><a href="#">三級菜單2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<script>
let main_menu = document.querySelector('nav ul');
let submenu = null;
main_menu.addEventListener('click', function(e) {
if(e.target.tagName === 'A') {
e.preventDefault();
if(submenu !== null) {
submenu.style.display = 'none';
}
submenu = e.target.nextElementSibling;
submenu.style.display = 'block';
}
});
</script>

以上方式可以處理任意深度的菜單，同時也可以在移動端應用較廣泛。然而，該方式也有它的缺點，即菜單展開時沒有滑動效果，同時代碼實現相對較為復雜。因此，在實際開發中，我們需要根據具體需求選擇最適合的方式。