CSS 中下拉菜單是網頁開發中常見的元素，也是面試中經常會被考察的知識點。下面介紹一些在制作下拉菜單時會遇到的問題。

.dropdown {
position: relative;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
}
.dropdown:hover .dropdown-menu {
display: block;
}

1. 下拉菜單出現時如何保證其始終在瀏覽器窗口內？

當下拉菜單的位置超出了可視區域時，用戶就無法正確地使用它。為了解決這個問題，可以使用 JavaScript 和 CSS 來計算和調整位置。

function adjustDropdown(dropdown) {
let menu = dropdown.querySelector('.dropdown-menu');
let rect = dropdown.getBoundingClientRect();
if (rect.bottom + menu.offsetHeight >window.innerHeight) {
menu.style.top = -menu.offsetHeight + 'px';
}
}

2. 如何在點擊頁面其他位置時收起下拉菜單？

為了關閉下拉菜單，需要在頁面其他位置添加事件監聽器。當用戶點擊這些位置時，下拉菜單會自動關閉。

document.addEventListener('click', function(event) {
let dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(function(dropdown) {
let menu = dropdown.querySelector('.dropdown-menu');
if (dropdown.contains(event.target) === false) {
menu.style.display = 'none';
}
});
});

3. 如何實現多級下拉菜單？

在下拉菜單中添加其他下拉菜單項，即可實現多級下拉菜單。

.dropdown-submenu {
position: static;
}
.dropdown-submenu .dropdown-menu {
left: 100%;
top: 0;
}

下拉菜單是網頁中常見的交互元素，了解和掌握其制作方法可以幫助開發者更好地構建用戶友好的網頁。以上是在制作下拉菜單時可能遇到的一些問題及其解決方法，希望對您有所幫助。