CSS中的下拉菜單是一個很有用的功能，可以讓網頁更加美觀和易于導航。下面將介紹一些基本的CSS樣式和代碼，來制作一個簡單的下拉菜單。

首先，我們需要一個包含菜單選項的HTML元素，例如一個ul（無序列表）或nav（導航欄）元素。在ul或nav元素中，我們可以使用li（列表項）元素來表示每一個菜單選項。為了區分頂級菜單和下拉菜單，我們可以將頂級菜單使用類（class）或者ID（id）進行標記。例如：

<nav>
<ul class="topmenu">
<li><a href="#">首頁</a></li>
<li class="dropdown"><a href="#">產品</a>
<ul class="submenu">
<li><a href="#">產品1</a></li>
<li><a href="#">產品2</a></li>
<li><a href="#">產品3</a></li>
</ul>
</li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

在上面的代碼中，我們定義了一個nav元素，并在其中包含了一個class為"topmenu"的ul元素。ul元素中包含了四個li子元素，其中第二個li元素包含了一個class為"dropdown"的下拉菜單。下拉菜單本身是一個ul元素，并包含了三個li子元素。

接下來，我們需要使用CSS樣式定義下拉菜單的顯示方式。基本的樣式如下：

.dropdown {
position: relative;
}
.submenu {
display: none;
position: absolute;
top: 100%; /*或者使用bottom: 0*/
left: 0;
}
.dropdown:hover .submenu {
display: block;
}

在上面的CSS樣式中，我們定義了class為"dropdown"的元素的position屬性為relative，這樣就可以讓它的子元素相對于它進行定位。下拉菜單的樣式使用position:absolute來定義，使其脫離文檔流，可以自由定位其位置。top屬性定義了下拉列表的垂直位置，一般設置為父級元素的下邊緣，使下拉列表完全覆蓋父級元素。

最后，我們使用:hover偽類來定義鼠標懸浮于頂級菜單時下拉菜單的展開方式。當鼠標懸浮于頂級菜單時，下拉菜單的display屬性被設置為block，從而顯示出下拉菜單。

通過上述的代碼和樣式，我們就可以制作一個簡單的下拉菜單了。可以根據實際情況進行調整和擴展，使下拉菜單更加美觀和實用。