CSS搜索框前面下拉功能是一個非常實用的特性，它可以幫助用戶更方便地搜索需要的信息。下面是一段簡單的代碼實現該功能：

.search-box {
position: relative;
}
.dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
background-color: white;
border: 1px solid #ccc;
}
.dropdown-item {
cursor: pointer;
padding: 5px;
border-bottom: 1px solid #ccc;
}
.dropdown-item:last-child {
border-bottom: none;
}

以上代碼中，.search-box是搜索框的外層容器，.dropdown是下拉框的容器，.dropdown-item是下拉框里的每個項目。接下來是實現下拉功能的JavaScript代碼：

const searchBox = document.querySelector('.search-box');
const dropdown = document.querySelector('.dropdown');
const dropdownItems = document.querySelectorAll('.dropdown-item');
searchBox.addEventListener('click', function() {
dropdown.classList.toggle('show');
});
dropdownItems.forEach(item => {
item.addEventListener('click', function() {
const text = this.textContent;
searchBox.querySelector('input').value = text;
dropdown.classList.remove('show');
});
});
document.addEventListener('click', function(e) {
if (!searchBox.contains(e.target)) {
dropdown.classList.remove('show');
}
});

以上代碼中，我們首先獲取到搜索框、下拉框以及每個下拉項。然后給搜索框添加了一個點擊事件，當用戶點擊搜索框時，下拉框就會顯示出來。接著給每個下拉項也添加了一個點擊事件，當用戶選擇了某個下拉項后，搜索框的值就會被自動填充，并且下拉框也會消失。最后，我們還添加了一個全局點擊事件，當用戶點擊了其他地方時，下拉框也會消失。