<div class="topnav">是HTML中的一個class屬性，用于定義頂部導航欄的樣式和布局。它常用于網頁設計中用于創建一個直觀和易于導航的菜單欄，可以使用戶更方便地瀏覽和定位到網站的各個部分。
下面是幾個關于<div class="topnav">的代碼案例，詳細解釋其用法和作用。
第一個案例是一個簡單的頂部導航欄示例：

下面是一個簡單的頂部導航欄示例：

<div class="topnav">
<a href="#home">首頁</a>
<a href="#about">關于我們</a>
<a href="#services">服務</a>
<a href="#contact">聯系我們</a>
</div>

在這個案例中，<div class="topnav">元素包含了四個導航鏈接，分別是"首頁"、"關于我們"、"服務"和"聯系我們"。通過設置class屬性為"topnav"，我們可以為這些導航鏈接定義共同的樣式。
第二個案例是一個帶有下拉菜單的頂部導航欄示例：

下面是一個帶有下拉菜單的頂部導航欄示例：

<div class="topnav">
<a href="#home">首頁</a>
<a href="#news">新聞</a>
<div class="dropdown">
<button class="dropbtn">服務</button>
<div class="dropdown-content">
<a href="#design">設計</a>
<a href="#development">開發</a>
<a href="#marketing">市場營銷</a>
</div>
</div>
<a href="#contact">聯系我們</a>
</div>

在這個案例中，我們使用了一個下拉菜單來展示更多的導航選項。通過在<div class="topnav">內部嵌套一個具有class屬性為"dropdown"的<div>元素，我們可以將一個按鈕和一個下拉內容區域結合在一起，實現下拉菜單的效果。
第三個案例是一個帶有活動狀態的頂部導航欄示例：

下面是一個帶有活動狀態的頂部導航欄示例：

<div class="topnav">
<a href="#home" class="active">首頁</a>
<a href="#about">關于我們</a>
<a href="#services">服務</a>
<a href="#contact">聯系我們</a>
</div>

在這個案例中，我們通過為其中一個導航鏈接添加class屬性為"active"，來設置該鏈接的活動狀態樣式。這樣用戶在瀏覽網頁時就可以輕松地知道當前所在的頁面或導航位置。
上述案例是關于<div class="topnav">的使用實例，你可以根據自己的需求對其進行自定義樣式，以實現更好的用戶體驗和導航功能。通過合理運用<div class="topnav">，你可以創造出專業、美觀且易于操作的頂部導航欄，提升網站的整體質量和用戶滿意度。
參考文獻： - "How to Create a Top Navigation Bar"，W3Schools, 訪問日期：2022年7月21日，鏈接：<a target="_blank">https://www.w3schools.com/howto/howto_css_topnav.asp</a> - "Topnav - top navigation menu with dropdown"，Codepen, 訪問日期：2022年7月21日，鏈接：<a target="_blank">https://codepen.io/5p1n33d/pen/XWrLPBz</a>