在網頁設計中，導航條是非常重要的一部分，因為它可以讓用戶更加方便地瀏覽網站的內容。而在實現導航條時，CSS是非常關鍵的一部分。下面將介紹一些常見的CSS導航條素材。

/* 1. 簡單的橫向導航條 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
color: #333;
text-decoration: none;
border-bottom: 2px solid transparent;
}
a:hover {
border-bottom: 2px solid #333;
}
/* 2. 帶下拉菜單的導航條 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px;
}
a {
color: #333;
text-decoration: none;
}
ul.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
}
li:hover ul.sub-menu {
display: block;
}
/* 3. 帶動畫效果的導航條 */
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
display: inline-block;
position: relative;
margin-right: 20px;
cursor: pointer;
}
a {
color: #333;
text-decoration: none;
display: block;
padding: 10px;
}
li:hover a {
background-color: #333;
color: #fff;
}
li:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #333;
z-index: -1;
transition: height 0.4s;
}
li:hover:before {
height: 100%;
}
/* 4. 卡片式導航條 */
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
li {
margin-right: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.3s;
cursor: pointer;
}
li:hover {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
a {
display: block;
padding: 20px;
text-align: center;
text-decoration: none;
color: #333;
}

以上是常見的CSS導航條素材，有不同的風格和特點，可以根據具體需求選擇合適的樣式進行使用。