CSS導航下拉框是網站設計中經常使用的一種元素，它使得網站的導航菜單更加美觀、易于使用。在這篇文章中，我們將介紹如何使用CSS創建一個簡單的導航下拉框模板。
<html>
<head>
<style>
/* 聲明下拉框外觀 */
.dropdown {
position: relative;
display: inline-block;
}
/* 聲明下拉框菜單外觀 */
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
/* 當鼠標懸浮在下拉框上時顯示下拉框菜單 */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<a href="#">導航菜單</a>
<div class="dropdown-content">
<a href="#">菜單1</a>
<a href="#">菜單2</a>
<a href="#">菜單3</a>
</div>
</div>
</body>
</html>在上面的代碼中，我們首先聲明了一個類名為“dropdown”的元素，它的外觀使用了“position: relative; display: inline-block;”這樣的CSS屬性。接著，我們聲明了一個類名為“dropdown-content”的元素，用于存放下拉框菜單，它的外觀使用了“display: none; position: absolute; z-index: 1;”這樣的屬性，這使得它在下拉框中不可見。最后，我們使用了“:hover”偽類選擇器，當鼠標懸浮在下拉框上時，將下拉框菜單的可見性設置為“display: block;”。
通過上面的CSS代碼，我們已經創建了一個基本的導航下拉框模板，并且可以根據需要修改其外觀和樣式，使其更加適合我們的網站。