橫排導航欄是網頁設計中常用的一種元素，通過CSS樣式控制可以實現不同的效果，下面是一些常見的橫排導航欄CSS樣式。

/* 第一種：帶下劃線的導航欄 */
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 20px;
}
a {
text-decoration: none;
color: #333;
position: relative;
}
a:hover {
color: #666;
}
a:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #666;
bottom: -10px;
left: 0;
transform: scaleX(0);
transition: transform 0.2s;
}
a:hover:after {
transform: scaleX(1);
}
/* 第二種：帶邊框的導航欄 */
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 20px;
}
a {
text-decoration: none;
color: #333;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
a:hover {
background: #f5f5f5;
}
/* 第三種：帶背景顏色的導航欄 */
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 20px;
}
a {
text-decoration: none;
color: #fff;
padding: 10px 20px;
background: #333;
border-radius: 5px;
}
a:hover {
background: #666;
}