CSS下拉菜單是網頁設計中常用的一種交互方式，它能讓用戶輕松地找到需要的信息或操作。下面介紹一種將下拉菜單居左對齊的方法。

首先，我們需要先創建一個HTML結構，包括一個頂部導航欄和一個下拉菜單。

<div class="top-nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">產品</a>
<div class="dropdown-content">
<a href="#">產品1</a>
<a href="#">產品2</a>
<a href="#">產品3</a>
</div>
</li>
<li><a href="#">關于我們</a></li>
</ul>
</div>

接著，我們給頂部導航欄設置樣式：

.top-nav {
background-color: #333;
color: #fff;
}
.top-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.top-nav li {
display: inline-block;
}
.top-nav li a {
display: block;
padding: 15px;
text-decoration: none;
color: #fff;
}
.top-nav .dropdown {
position: relative;
}
.top-nav .dropdown .dropbtn {
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
.top-nav .dropdown:hover .dropdown-content {
display: block;
}
.top-nav .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left: 0; /* 將下拉菜單位置設置到最左邊 */
top: 50px;
}
.top-nav .dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.top-nav .dropdown-content a:hover {
background-color: #f1f1f1;
}

通過給下拉菜單的父元素設置position: relative，再將下拉菜單的樣式設置為position: absolute，并將left屬性設置為0，就能實現將下拉菜單居左對齊的效果。

至此，我們就完成了一個將下拉菜單居左對齊的樣式。