css下拉菜单居左 |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，就能实现将下拉菜单居左对齐的效果。

至此，大家就完成了一个将下拉菜单居左对齐的样式。