CSS3是一種用于網頁設計的樣式表語言，它具有多種導航效果，以下是其中的一些:

/*1. 水平導航*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
/*2. 垂直導航*/
nav {
display: inline-block;
background:#34495e;
}
nav ul {
margin: 0;
padding: 0;
}
nav li {
list-style: none;
}
nav a {
display: block;
color: white;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
padding: 0.6em;
}
/*3. 圓形導航*/
.menu {
display: inline-block;
margin-top: 50px;
margin-left: 40%;
position: relative;
}
.menu_btn {
display: block;
width: 50px;
height: 50px;
background: #7f8c8d;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: #fff;
cursor: pointer;
transition: all 0.3s ease;
}
.menu_btn:hover {
background-color: #3498db;
}
.menu_block {
position: absolute;
visibility: hidden;
opacity: 0;
width: 200px;
right: 50px;
top: 0;
transition: all 0.3s ease;
}
.menu_btn:hover ~ .menu_block {
visibility: visible;
opacity: 1;
top: 50px;
}
/*4. 下拉菜單*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*5. 偏移效果導航*/
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
left: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.offset {
position: relative;
}
.offset:hover .dropdown-content {
left: 160%;
top: 0;
}

以上是 CSS3 中的一些基本的導航功能，開發者可以根據實際需要進行相應的樣式修改，實現更加美觀與實用的導航功能。