CSS基礎下拉菜單怎么做 在網頁開發中，下拉菜單是一個非常常見的功能。通過下拉菜單可以方便用戶選擇所需要的選項。下面介紹如何使用CSS制作基礎下拉菜單。 首先，在HTML中創建一個菜單的容器，例如使用ul和li標簽，如下：

<ul class="menu">
<li>菜單1
<ul>
<li>子菜單1</li>
<li>子菜單2</li>
<li>子菜單3</li>
</ul>
</li>
<li>菜單2</li>
<li>菜單3</li>
</ul>

其中，第一層的li標簽為一級菜單，其中含有一個子菜單的ul標簽。子菜單的li標簽為二級菜單。 接下來，為菜單添加CSS樣式。首先，去掉默認的列表樣式，可以使用以下樣式：

.menu {
list-style: none;
margin: 0;
padding: 0;
}

其中，list-style為列表樣式屬性，將li標簽的默認樣式去掉。無序列表的默認樣式為實心圓點，有序列表的默認樣式為數字。 接著，設置一級菜單的樣式，字體、背景顏色、鼠標懸停效果等等：

.menu >li {
display: inline-block;
font-size: 16px;
padding: 10px 20px;
background-color: #eee;
border-radius: 5px;
}
.menu >li:hover {
background-color: #ccc;
}

其中，display為顯示方式，將li標簽默認的塊級顯示方式改為行內塊級顯示方式，可以使得菜單水平排列。同時，padding用于設置菜單項的內邊距。border-radius為圓角屬性，將菜單項設置為圓角矩形。 同時，在:hover偽類中設置鼠標懸停時的背景顏色，可以呈現出菜單項被激活后的視覺效果。 最后，設置子菜單的樣式，隱藏子菜單，當一級菜單被懸停時顯示：

.menu ul {
display: none;
position: absolute;
z-index: 1;
}
.menu >li:hover ul {
display: block;
}
.menu ul li {
display: block;
background-color: #fff;
}
.menu ul li:hover {
background-color: #ccc;
}

其中，display:none用于隱藏子菜單。position:absolute用于設置子菜單的位置，該屬性將子菜單設置為相對于頁面的絕對位置。z-index屬性用于設置子菜單的層級關系，使其在相同層級的其他元素之上。 當一級菜單被懸停時，通過menu >li:hover ul選擇器，將子菜單的display屬性設置為block，即顯示出來。 最后，設置子菜單的樣式和鼠標懸停效果等。 通過以上步驟，我們就可以通過CSS制作一個基礎的下拉菜單了。當然，下拉菜單的樣式還可以繼續優化，例如菜單的動畫效果等等。