在CSS中创建导航效果的方法有很多，下面是一些基本的示例。

    简单的水平导航栏：

HTML：

<ul id="nav">  
  <li><a href="#">首页</a></li>  
  <li><a href="#">关于</a></li>  
  <li><a href="#">服务</a></li>  
  <li><a href="#">联系我们</a></li>  
</ul>

CSS：

#nav {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
  overflow: hidden;  
}  
  
#nav li {  
  float: left;  
}  
  
#nav li a {  
  display: block;  
  color: white;  
  text-align: center;  
  padding: 14px 16px;  
  text-decoration: none;  
}

    响应式导航栏：

HTML：

<nav role="navigation">  
  <ul>  
    <li><a href="#">首页</a></li>  
    <li><a href="#">关于</a></li>  
    <li><a href="#">服务</a></li>  
    <li><a href="#">联系我们</a></li>  
  </ul>   
</nav>

CSS：

nav ul {  
  list-style-type: none;  
  margin: 0;  
  padding: 0;  
}  
  
nav a {  
  display: block;  
  text-decoration: none;  
}  
  
/* 小屏幕设备 */  
@media screen and (max-width: 768px) {  
  nav ul {  
    display: none;  
  }  
}