导航样式设计通常是通过CSS（层叠样式表）来实现的。下面是一个简单的导航样式设计代码示例：
HTML代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
CSS代码(styles.css):
.navigation {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
background-color: #333;
}
.navigation li {
padding: 10px 20px;
}
.navigation a {
color: white;
text-decoration: none;
}
.navigation a:hover {
background-color: #555;
}
在上面的示例中，我们使用了<ul>和<li>标签来创建导舨菜单，并且给<ul>元素添加了一个名为navigation的类。在CSS样式中，我们首先将列表样式设置为无，然后使用flex布局来水平排列导航菜单项。我们还为<li>和<a>元素添加了一些样式，如内边距、背景颜色、文字颜色等，以及当鼠标悬停在链接上时的样式。
这只是一个简单的导航样式设计的示例，实际中可能还会有更多的样式设计和交互效果。但是通过这个例子，你可以了解到如何使用CSS来设计导航的样式。