CSS導航層是網站中常用的一種頁面布局方式，可以在頁面上以菜單的形式展示網站的主要功能模塊，方便用戶進行頁面跳轉。下面是一份CSS導航層的代碼示例：

<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">產品中心</a>
<ul>
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
</ul>
</li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>

在上述代碼中，使用了一個div元素作為導航層的容器，并將其類名設為"nav"，便于進行樣式設置。在nav容器中，使用了一個ul元素來創建導航菜單，并在每個li元素中添加了一個a元素來實現頁面跳轉。當用戶將鼠標移動到包含子菜單的li元素上時，會展示出相應的子菜單內容。

為了創建CSS導航層的樣式，還需要添加一些CSS代碼，如下所示：

.nav {
background-color: #f1f1f1;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
position: relative;
}
.nav li a {
display: block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav li:hover {
background-color: #ddd;
}
.nav li:hover ul {
display: block;
}
.nav ul {
display: none;
position: absolute;
top: 48px;
left: 0;
background-color: #fff;
border: 1px solid #ddd;
padding: 0;
margin: 0;
}
.nav ul li {
display: block;
float: none;
}
.nav ul li a {
color: #333;
text-align: left;
padding: 8px 16px;
text-decoration: none;
}
.nav ul li:hover {
background-color: #f1f1f1;
}

上述CSS代碼中，通過設置導航容器的背景顏色、文本樣式、邊框等屬性來實現導航塊的樣式。通過設置ul、li、a等元素的樣式，可以實現菜單項目的排列、邊距、字體顏色、背景色等樣式效果。通過設置li:hover和ul:hover等樣式，可以實現鼠標懸停在導航菜單或子菜單上時的樣式效果。

綜上所述，CSS導航層是一個非常實用的頁面布局方式，可以根據具體需求進行調整和調試，以滿足不同的用戶需求和操作體驗。