CSS是前端開發必不可少的技術。其中導航欄是網站開發中必不可少的一個組件，本文將介紹如何使用CSS應用導航代碼來實現一個簡單的導航菜單。

首先我們需要在HTML文件中引入CSS文件：

<link rel="stylesheet" href="style.css">

接下來就是CSS代碼的編寫。我們先設置導航菜單的樣式：

nav {
background-color: #333;
display: flex;
justify-content: space-between;
padding: 20px;
}

以上代碼設置了導航欄的背景色為深灰色，使用Flex布局使其成為橫向排列，并且在菜單兩側添加了20px的內邊距，讓菜單與邊框產生一定距離。

接下來我們來設置菜單項的樣式：

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}

以上代碼設置了菜單項的樣式。我們使用Flex布局使子元素橫向排列，并將列表樣式去掉。我們將每個菜單項之間的距離設為20px，使用a標簽來實現超鏈接，同時使其文字顏色為白色。當鼠標移到a標簽上時，我們添加下劃線效果，增加用戶交互體驗。

最后我們來看一下HTML代碼：

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

以上代碼中我們使用nav標簽來包裹我們的菜單，使用ul和li標簽來實現菜單的列表元素，使用a標簽來添加超鏈接。

通過以上的CSS應用導航代碼，我們成功的實現了一個簡單的導航菜單。讀者可以自己在上述代碼基礎上進行修改，來實現適合自己需求的導航菜單。