在網站設計中，下拉菜單是一個非常常用的功能，它可以讓網站菜單更加具有條理性和美觀性。在CSS中，我們可以使用行內樣式構建下拉菜單。

<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
</style>
<div class="dropdown">
<a href="#">下拉菜單</a>
<div class="dropdown-content">
<a href="#">菜單項1</a>
<a href="#">菜單項2</a>
<a href="#">菜單項3</a>
</div>
</div>

上面這段CSS代碼中，我們首先定義了一個.dropdown類，它的position屬性為relative，這代表該元素是相對定位的。接著，我們定義了一個.dropdown-content類，它的display屬性設置為none，這代表該元素默認不顯示，且position屬性為absolute，代表該元素是絕對定位的。在元素.hover的偽類應用中，我們設置.dropdown-content的display屬性值為block，這樣在鼠標懸停在.dropdown元素上時，.dropdown-content元素就會顯示出來。

在HTML代碼中，我們使用了一個div元素來包裹下拉菜單，該元素的class屬性為.dropdown。在該元素內，我們使用了一個a元素來顯示菜單標題，并在其下一級內嵌一個div元素，并賦予該元素class為.dropdown-content。在.dropdown-content元素內，我們使用了三個a元素，分別表示該下拉菜單中的三個菜單項。

在CSS中，我們還對 .dropdown-content a 元素設置了color、padding和text-decoration屬性。color屬性用來設置文字顏色，padding屬性設置菜單項內部的內邊距，text-decoration屬性則用來聲明是否顯示下劃線。