CSS 是網頁設計中非常重要的一部分，它可以實現一些很酷的效果，比如設置一個動態導航菜單。今天我們就來學習一下如何用 CSS 來設置動態導航菜單。

首先，我們需要先寫好 HTML 結構。一個簡單的導航菜單通常由一個 ul 列表和一系列的 li 項組成。比如下面這樣：

<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

然后，在 CSS 中設置菜單的樣式。我們首先需要給菜單設置一個 position: relative;，這樣才能讓它內部的子元素 position: absolute; 生效：

.menu {
position: relative;
}
.menu li {
display: inline-block;
position: relative;
}

接下來，我們需要給每個菜單項設置一個懸浮效果。可以使用 :hover 偽類實現：

.menu li:hover {
background-color: #ddd;
}

然后，我們需要給每個菜單項的子菜單（如果有的話）設置樣式。首先，將其隱藏起來：

.menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}

然后，當鼠標懸浮在菜單項上時，將其顯示出來：

.menu li:hover ul {
display: block;
}

最后，我們需要給子菜單項設定樣式：

.menu ul li {
display: block;
background-color: #eee;
}
.menu ul li:hover {
background-color: #ddd;
}

有了以上的 CSS 樣式設置，我們的動態導航菜單就完成了。完整的代碼如下：

<ul class="menu">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a>
<ul class="sub-menu">
<li><a href="#">公司介紹</a></li>
<li><a href="#">資質榮譽</a></li>
<li><a href="#">公司文化</a></li>
</ul>
</li>
<li><a href="#">產品中心</a>
<ul class="sub-menu">
<li><a href="#">產品展示</a></li>
<li><a href="#">產品分類</a></li>
<li><a href="#">最新產品</a></li>
</ul>
</li>
<li><a href="#">聯系我們</a></li>
</ul>
.menu {
position: relative;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li:hover {
background-color: #ddd;
}
.menu li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu li:hover ul {
display: block;
}
.menu ul li {
display: block;
background-color: #eee;
}
.menu ul li:hover {
background-color: #ddd;
}

通過上述代碼及說明，你可以自由設置你所需要的動態導航菜單。祝你編碼愉快。