CSS3頂部導航是一個非常流行的網站設計元素。通過使用CSS3的新特性，可以創建出現代、美觀的導航欄。下面是一個可以作為示例的CSS3頂部導航代碼：

/* 導航外框 */
.nav {
height: 50px;
background-color: #333;
}
/* 導航鏈接 */
.nav a {
display: inline-block;
height: 100%;
padding: 0 20px;
line-height: 50px;
color: #fff;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: border-color 0.2s ease-in-out;
}
/* 指示當前頁面 */
.nav a.active,
.nav a:hover {
border-bottom-color: #fff;
}

以上代碼中，.nav類設置了導航欄的高度和背景顏色。.nav a類設定了導航鏈接的樣式，使用inline-block可以使得鏈接橫向排列，并且設置了文字的顏色、下劃線樣式、邊框顏色。通過使用transition屬性，鼠標懸停或者點擊鏈接時可以實現顏色的過渡效果。

此外，我們還可以通過媒體查詢，根據屏幕大小適配導航欄的樣式。以下是一個簡單的媒體查詢樣例：

/* 在750px以下的屏幕上隱藏導航鏈接 */
@media (max-width: 750px) {
.nav a {
display: none;
}
}

在以上樣例中，我們使用@media關鍵字對屏幕寬度進行了限制，當屏幕寬度小于750px時，導航鏈接會被隱藏。

總的來說，CSS3頂部導航是一個非常實用的元素，它可以讓你的網站看起來更加現代、出色。通過使用媒體查詢，可以適配不同屏幕的設備，讓導航欄的樣式更加靈活多變。