CSS导航样式是网页设计中非常重要的一个部分，可以让网站看起来更加美观、清晰和易读。下面是一些常见的导航样式源代码，供大家参考。

ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
display: block;
font-weight: bold;
color: #333;
text-decoration: none;
}
a:hover {
color: #666;
}

上面的代码是一个简单的水平导航样式，使用了无序列表（ul）、列表项（li）和超链接（a）等基本的HTML元素。通过CSS设置去掉了列表项前面的默认符号，使用了内联块状元素的display属性让列表项水平排列，并通过设置右侧的margin值来间距开每个列表项。每个超链接都被设置成块级元素，让文本垂直居中，并应用了hover样式来在鼠标移上去时产生视觉效果。

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
.navbar a:hover {
text-decoration: underline;
}

上面的代码是一个使用flex布局的导航样式，可以让导航项自适应宽度，并能实现自动换行。通过设置flex容器（.navbar）的属性，实现了导航项居中排列，并在左右两端设置了较宽的内间距。超链接（a）的样式也相应被设置，使用了无下划线的文字，以及鼠标移过去时会产生下划线的效果。