CSS菜單下拉是Web設計中非常常見的一個功能，它能夠為頁面的導航欄提供更好的交互體驗。通過jQuery，我們可以實現一款自適應寬度的下拉菜單。

$(document).ready(function() {
//當鼠標懸浮到菜單上時
$('ul li').hover(function() {
//隱藏所有的ul子菜單
$("ul.sub-menu").hide();
//找到當前子菜單并顯示
$(this).find('ul.sub-menu').show();
//設置菜單的寬度為父菜單寬度
$(this).find('ul.sub-menu').css("width", $(this).width());
});
//當鼠標離開菜單時
$('ul li').mouseleave(function() {
//隱藏所有的ul子菜單
$("ul.sub-menu").hide();
});
});

上面的代碼會在文檔就緒時執行，當鼠標懸浮到菜單選項上時，它會遍歷所有的子菜單并進行隱藏，然后它會找到當前選項所對應的子菜單并顯示它。接著，它會為子菜單設置和父菜單相同的寬度。如果鼠標離開了菜單選項，那么所有的子菜單都會被隱藏。

要使這個下拉菜單生效，我們需要定義一個CSS樣式，如下所示：

ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
display: none;
padding: 0;
margin: 0;
border: none;
background-color: #fff;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
ul.sub-menu li {
display: block;
width: 100%;
padding: 10px;
border-bottom: 1px solid #e5e5e5;
}
ul.sub-menu li:last-child {
border-bottom: none;
}
ul.sub-menu li:hover {
background-color: #f5f5f5;
}

上面的CSS樣式定義了子菜單的顯示方式。它們默認是隱藏的（display: none;），然后在JS代碼中被動態顯示。菜單選項有默認的樣式，但鼠標懸浮時會變成灰色的高亮顯示。最后，這個CSS樣式對于子菜單的寬度沒有進行定義，因為它會在JS代碼中被動態設置。