CSS 和 JavaScript 是構建現代 Web 應用程序的重要組成部分，導航菜單是 Web 應用程序中的常見組件之一。在本文中，我們將介紹如何使用 CSS 和 JavaScript 實現一個簡單的導航菜單。
HTML 代碼示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>導航菜單示例</title>
<style>
#nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 20px;
#nav a {
color: white;
text-decoration: none;
font-size: 16px;
margin-right: 10px;
#nav a:hover {
color: #ddd;
background-color: #333;
</style>
</head>
<body>
<div id="nav">
<a href="#">首頁</a>
<a href="#">關于我</a>
<a href="#">聯系我們</a>
<a href="#">更多選項</a>
</div>
<script src="nav.js"></script>
</body>
</html>
下面是一個使用 CSS 偽元素和 JavaScript 實現一個簡單的導航菜單的示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>導航菜單示例</title>
<style>
#nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 20px;
#nav ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
#nav li {
margin-right: 10px;
#nav li:hover {
color: #ddd;
background-color: #333;
</style>
</head>
<body>
<div id="nav">
<ul id="nav-list">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我</a></li>
<li><a href="#">聯系我們</a></li>
<li><a href="#">更多選項</a></li>
</ul>
</div>
<script src="nav.js"></script>
</body>
</html>