CSS下拉菜单是网站开发中非常常见的功能之一。在这篇文章中,我们将会学习如何实现一个从左边出来的CSS下拉菜单。
首先,让我们来看看HTML结构:
<div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">Company</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> </ul> </div>
在上面的HTML中,我们为菜单创建了一个div元素,其中包含一个ul元素。在ul中,我们为每个菜单项创建了一个li元素,以及一个包含子菜单项的ul元素。需要注意的是,我们已经将子菜单项(Company、Team和Contact)放在子ul元素中。
接下来,我们将使用CSS来完成我们的下拉菜单。首先,我们需要让ul元素的所有子菜单项(所有ul中的li元素)以及子菜单(所有子ul元素)隐藏起来:
.menu ul li ul { display: none; }
现在,我们需要将我们的子菜单项从左侧滑出。我们可以使用CSS的transform属性来实现这一点:
.menu ul li:hover > ul { display: block; position: absolute; top: 0; left: 100%; transform: translateX(-100%); }
在上述代码中,我们使用:hover选择器选择了当前鼠标悬停的菜单项。我们使用了>选择器来选择当前菜单项下一个ul元素。我们将其位置设置为absolute,使其不占用文档流,并将其向右移动100%(即在菜单项的右侧)。最后,我们使用transform: translateX(-100%);将其从左边滑出。