CSS和JavaScript是網頁前端開發不可或缺的兩個關鍵技術，其中CSS可以控制網頁的樣式，而JavaScript可以為網頁添加各種交互效果。

在網頁中，三級菜單是一種常見的網頁導航方式，用戶可以方便地找到所需內容。接下來，我們將通過CSS和JavaScript實現一個簡單的三級菜單。

首先，我們需要使用HTML代碼創建菜單結構，以下是基本代碼：

<ul class="menu">
<li>一級菜單1
<ul class="submenu">
<li>二級菜單1
<ul class="sub-submenu">
<li>三級菜單1</li>
<li>三級菜單2</li>
</ul>
</li>
<li>二級菜單2</li>
<li>二級菜單3</li>
</ul>
</li>
<li>一級菜單2</li>
<li>一級菜單3</li>
</ul>

上述代碼中，我們定義了一個ul列表，并通過嵌套li元素來創建三級菜單。接下來，我們使用CSS為菜單添加樣式：

.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
position: relative;
margin-right: 20px;
}
.menu a {
display: block;
padding: 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.menu a:hover {
color: #fff;
background-color: #333;
}
.submenu,
.sub-submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
list-style: none;
z-index: 999;
}
.submenu li {
clear: both;
}
.sub-submenu li {
float: none;
}
.menu li:hover .submenu {
display: block;
}
.submenu li:hover .sub-submenu {
display: block;
}

在CSS代碼中，我們使用了float屬性來橫向排列菜單，并為菜單添加了背景色、邊距和文字顏色。同時，我們為二級菜單和三級菜單添加了絕對定位，以及移除了默認的列表樣式。

最后，我們使用JavaScript代碼來實現三級菜單的顯示和隱藏效果：

var menus = document.querySelectorAll('.menu >li');
for (var i = 0; i < menus.length; i++) {
menus[i].addEventListener('mouseover', function () {
this.querySelector('.submenu').style.display = 'block';
});
menus[i].addEventListener('mouseout', function () {
this.querySelector('.submenu').style.display = 'none';
var submenus = this.querySelectorAll('.submenu .sub-submenu');
for (var j = 0; j < submenus.length; j++) {
submenus[j].style.display = 'none';
}
});
}

以上JavaScript代碼中，我們使用querySelectorAll方法來選取菜單，然后為每個菜單添加鼠標移入和移出事件。當鼠標移入菜單時，我們將菜單下的二級菜單顯示出來；當鼠標移出菜單時，我們將所有菜單隱藏，并將當前菜單的二級菜單和三級菜單也一并隱藏。

通過CSS和JavaScript的協同作用，我們可以方便地實現一個簡單的三級菜單效果，為用戶提供更舒適的網頁瀏覽體驗。