这里利用的是伪元素的下拉三角效果,三角的两边分别是一个盒子的相邻两边,让盒子定位到需要的位置,并利用transform的rotte属性旋转45度.
transform: rotate(45deg);
给父盒子添加一个子盒子,并给父盒子添加超出隐藏属性.让子盒子隐藏.
overflow: hidden;
给父盒子添加伪类hover,当鼠标经过父盒子的时候,将overflow的值改为默认值visible,让子盒子显示,并让三角旋转225度,让三角朝上.
.box:hover::after { transform: rotate(225deg); }
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none;
}
a {
text-decoration: none;