網(wǎng)站導(dǎo)航對于網(wǎng)站來說是十分重要的，能夠方便用戶找到自己需要的頁面，提升用戶體驗(yàn)。下面我們將介紹一種簡單純CSS實(shí)現(xiàn)的三級導(dǎo)航。

首先，我們需要一個(gè)基本的HTML結(jié)構(gòu)，如下所示：

<nav class="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞中心</a>
<ul>
<li><a href="#">國內(nèi)新聞</a></li>
<li><a href="#">國際新聞</a></li>
<li><a href="#">娛樂新聞</a></li>
</ul>
</li>
<li><a href="#">產(chǎn)品中心</a>
<ul>
<li><a href="#">手機(jī)</a>
<ul>
<li><a href="#">華為</a></li>
<li><a href="#">小米</a></li>
<li><a href="#">蘋果</a></li>
</ul>
</li>
<li><a href="#">電視</a></li>
<li><a href="#">筆記本電腦</a></li>
</ul>
</li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</nav>

接著，我們使用CSS對導(dǎo)航進(jìn)行樣式設(shè)置：

.menu {
width: 100%;
background-color: #333;
font-size: 0;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu ul li {
display: inline-block;
width: 25%;
text-align: center;
position: relative;
}
.menu li:hover {
background-color: #666;
}
.menu a {
display: block;
color: #fff;
text-decoration: none;
padding: 15px 0;
font-size: 16px;
}
.menu ul ul {
position: absolute;
top: 100%;
left: 0;
background-color: #666;
display: none;
}
.menu ul ul li {
width: 50%;
display: block;
position: relative;
}
.menu li:hover > ul {
display: block;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
display: none;
}
.menu ul ul:hover > ul {
display: block;
}

以上CSS樣式設(shè)置了導(dǎo)航欄的基本樣式，其中，ul ul為導(dǎo)航欄的次級菜單，ul ul ul為導(dǎo)航欄的三級菜單。通過:hover實(shí)現(xiàn)導(dǎo)航欄的鼠標(biāo)滑過效果。

最后，我們得到的純CSS三級導(dǎo)航如下圖所示：