CSS水平二級菜單可以讓網站的導航欄更加美觀和實用。下面我們來學習一下如何制作CSS水平二級菜單。

/* HTML代碼 */
<ul class="menu">
<li>一級菜單1
<ul class="sub-menu">
<li>二級菜單1-1</li>
<li>二級菜單1-2</li>
<li>二級菜單1-3</li>
</ul>
</li>
<li>一級菜單2
<ul class="sub-menu">
<li>二級菜單2-1</li>
<li>二級菜單2-2</li>
<li>二級菜單2-3</li>
</ul>
</li>
</ul>

首先，我們需要針對一級菜單和二級菜單設置樣式：

/* CSS代碼 */
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu>li {
float: left;
position: relative;
margin-right: 20px;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 10px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.sub-menu li {
display: block;
margin-bottom: 5px;
}

其中，.menu代表一級菜單，.sub-menu代表二級菜單。.menu>li表示一級菜單的子元素（即每個一級菜單項），float屬性實現了一級菜單項的橫向排列。position:relative實現二級菜單的定位，margin-right屬性設置一級菜單項的間距。.sub-menu的display屬性設置為none，是為了一開始不顯示二級菜單，鼠標懸停在一級菜單項時再顯示二級菜單。top和left屬性設置二級菜單的位置，background-color屬性設為白色，padding和box-shadow屬性實現了二級菜單的樣式。.sub-menu li屬性將二級菜單項以塊級元素顯示，且設置了相應的下邊距。

接下來，我們需要在CSS中設置一些鼠標交互事件：

/* CSS代碼 */
.menu>li:hover .sub-menu {
display: block;
}
.sub-menu>li:hover {
background-color: #eee;
}

.menu>li:hover .sub-menu表示當鼠標懸停在一級菜單項上時，顯示該一級菜單項下的二級菜單。.sub-menu>li:hover表示當鼠標懸停在二級菜單項上時，更改其背景色。

有了以上的CSS樣式和交互事件，我們就可以制作一個簡單的CSS水平二級菜單了！