CSS點(diǎn)擊導(dǎo)航菜單是實(shí)現(xiàn)網(wǎng)站交互操作的一個重要部分，可以提高用戶體驗(yàn)。下面是一個簡單的例子。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產(chǎn)品</a></li>
<li><a href="#">關(guān)于我們</a></li>
</ul>
</nav>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #e74c3c;
}
nav a.active {
color: #e74c3c;
}
</style>
<script>
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
link.addEventListener('click', (event) => {
navLinks.forEach(link => link.classList.remove('active'));
event.target.classList.add('active');
});
});
</script>

首先，我們有一個具有四個選項(xiàng)的導(dǎo)航菜單。我們使用CSS來設(shè)置它們的樣式，使它們變得漂亮且易于使用。特別是，我們向其中一個鏈接添加了“active”類，以便它在被單擊后可以突出顯示。

接下來，我們使用JavaScript添加了一個事件偵聽器，當(dāng)每個鏈接被單擊時，我們會將所有鏈接的“active”類移除，然后將該鏈接的“active”類添加回去。這可以確保只有一個選項(xiàng)被選中。

這是一個非常簡單的例子，但它說明了如何使用CSS和JavaScript來創(chuàng)建一個具有可交互性的導(dǎo)航菜單。你可以添加更多的樣式和交互來實(shí)現(xiàn)更復(fù)雜的功能和效果。