.dropdown-menu { position: relative; display: inline-block; } .dropdown-menu ul { display: none; position: absolute; top: 100%; left: 0; background-color: #f1f1f1; } .dropdown-menu:hover ul { display: block; } .dropdown-menu i { display: inline-block; margin-left: 5px; transform: rotate(90deg); transition: transform 0.2s ease-in-out; } .dropdown-menu:hover i { transform: rotate(-90deg); }
这段CSS代码使用了伪类选择器:hover来定义下拉菜单在鼠标悬停时的样式。同时,使用了transform属性来实现下拉图标的旋转动画效果。要创建一个下拉菜单,需要将菜单项包装在一个类名为dropdown-menu的div元素中,并使用ul标签包装下拉菜单项。
这是一个基本的下拉菜单示例。你可以根据需要对样式进行调整和修改,以便使它更符合你的网站设计风格和功能要求。