CSS下拉菜单是Web页面设计中常用的元素,它可以帮助用户快速地选择所需的选项,是提高用户体验的好工具。本文将为大家介绍如何使用HTML和CSS制作下拉菜单。 1. HTML 在HTML中,我们需要创
<ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> </ul>
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175); } .dropdown-menu li { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.428571429; color: #333; white-space: nowrap; } .dropdown-menu li:hover { background-color: #f5f5f5; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu { animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: both; transform-origin: top; animation-name: fadeInDown; } <br> @keyframes fadeInDown { 0% { opacity: 0; transform: scale(0.5) translateY(-100%); } 100% { opacity: 1; transform: scale(1) translateY(0%); } }
粉丝
0
关注
0
收藏
0