CSS导航栏是在网页设计中非常重要的一个元素，它能够让用户在浏览网页时更加方便地找到所需要的内容。

要制作CSS导航栏，首先需要了解HTML5和CSS3的基本语法。HTML5负责定义网页的内容和结构，CSS3负责网页的样式和布局。

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>

将以上代码放入HTML文件的

标签中即可创建一个简单的导航栏。

接下来，添加CSS样式来美化导航栏。例如可以添加背景颜色、文字颜色、字体大小等样式。

nav {
background-color: #333;
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 20px;
line-height: 50px;
}
nav li a {
color: #fff;
font-size: 18px;
text-decoration: none;
}
nav li a:hover {
color: #f00;
}

以上样式代码可以让导航栏的背景颜色变成深灰色，字体变成白色，当鼠标滑过时字体颜色变成红色。

制作CSS导航栏需要灵活运用CSS3的各种属性，通过代码编写可以让导航栏更加美观实用。