今天我們將要學習如何使用HTML5創建二級導航欄。為了方便演示，我們將基本的HTML和CSS代碼放在一起，最終效果展示在下面。

<nav>
<ul class="primary-nav">
<li>
<a href="#">首頁</a>
</li>
<li>
<a href="#">產品</a>
<ul class="secondary-nav">
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
</ul>
</li>
<li>
<a href="#">服務</a>
<ul class="secondary-nav">
<li><a href="#">服務1</a></li>
<li><a href="#">服務2</a></li>
</ul>
</li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
<style>
nav {
display: flex;
justify-content: space-between;
}
.primary-nav {
display: flex;
list-style: none;
font-weight: bold;
}
.primary-nav li {
padding: 0 20px;
}
.secondary-nav {
display: none;
position: absolute;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px 0;
list-style: none;
}
.primary-nav li:hover .secondary-nav {
display: block;
}
.secondary-nav li {
padding: 5px 20px;
}
</style>

代碼中使用了nav元素來包含整個導航欄，ul元素用于創建一級導航菜單，li元素用于創建菜單項，每個li元素中使用了一個a元素來創建一個可點擊的菜單鏈接。如果需要創建二級導航，只需要在li元素中再嵌套一個ul元素，并在其中添加菜單項。CSS部分涵蓋了對導航欄整體排版的控制，以及二級菜單的顯示與隱藏。

在這里，你會發現這段代碼中通過一些簡單的HTML和CSS，就可以創建出一個帶有二級導航的菜單，非常實用且易于修改。當然，你可以針對你的網站需求適當地修改代碼，以適應不同的場景。