首页 >

css 下拉图标,文本背景为圆形css

showbo.css,css 表单文字位置,css常用引入方式,选择器.css方法,css怎么讲图片向上移,ie6 css圆角属性,文本背景为圆形css

css 下拉图标,文本背景为圆形css

.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标签包装下拉菜单项。

这是一个基本的下拉菜单示例。你可以根据需要对样式进行调整和修改,以便使它更符合你的网站设计风格和功能要求。


  • 暂无相关文章