在開發網站過程中，使用CSS設置4級菜單是一個非常常見的需求。下面我們就來看看如何實現。 首先，在HTML代碼中，我們需要創建一個4級菜單的結構。一般來說，可以使用無序列表（ul）和有序列表（ol）相互嵌套的形式來構建。代碼如下：

<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>
<li><a href="#">三級菜單3</a></li>
</ul>
</li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
</ul>
</li>
<li><a href="#">一級菜單2</a></li>
<li><a href="#">一級菜單3</a></li>
</ul>
</nav>

接下來，我們需要針對4級菜單中的每個項目進行CSS樣式設置。下面是一個基本的設置：

nav ul li {
position:relative;
display:inline-block;
}
nav ul li:hover >ul {
display:block;
}
nav ul ul {
display:none;
position:absolute;
top:100%;
}
nav ul ul li {
display:block;
width:100%;
}
nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
nav a {
display:block;
padding:0 10px;
color:#333;
font-size:14px;
line-height:40px;
text-decoration:none;
background:#fff;
}
nav ul ul li:hover >ul {
display:block;
}
nav ul li:hover a {
background:#f5f5f5;
}

上述代碼中，我們通過設置相對定位讓每個一級菜單中的二級菜單、二級菜單中的三級菜單等都能夠相對于父級菜單進行定位。同時，設置display為none，使得子級菜單默認不顯示。在一級菜單上添加:hover偽類，實現子菜單的顯示。而在設置a標簽樣式時，通過設置背景色和hover偽類添加交互效果來提高用戶體驗。 通過上述CSS樣式設置，我們可以輕松實現一個基礎的4級菜單效果。當然，具體的UI樣式設計還需根據實際需求進行微調，但基本的代碼結構和CSS樣式設置理念都已經在上述內容中介紹清楚了，相信讀者已經有了一定的了解。