CSS（層疊樣式表）是網頁開發中一種重要的語言，它主要負責對網頁的樣式進行定義和控制。其中，下拉式菜單是常見且比較簡單的頁面元素之一。下面我們就來學習一下如何使用CSS實現下拉式菜單。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉式菜單</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="dropdown">
<button class="dropbtn">菜單</button>
<div class="dropdown-content">
<a href="#">首頁</a>
<a href="#">新聞</a>
<a href="#">產品</a>
</div>
</div>
</body>
</html>
CSS代碼：
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
background-color: #3498db;
color: white;
padding: 10px;
border: none;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding: 10px;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}首先，在HTML文件中定義一個div元素，class為“dropdown”，其中包含一個button元素，class為“dropbtn”，并在div元素中定義一個div元素，class為“dropdown-content”，用于放置下拉菜單內容。在CSS文件中，設置dropdown元素為相對定位，dropdown-content元素為絕對定位，在非hover狀態下，將dropdown-content元素的display屬性設置為none，當對dropdown元素進行hover操作時，將dropdown-content的display屬性設置為block，具體操作可以參考CSS代碼。
嘗試將上述代碼復制到編輯器中并保存，打開瀏覽器，就可以看到一個簡單的下拉式菜單了。
下一篇css實現五角星評分