学习前端过程中，遇到小小难点：下拉框，在此记录一下。
下面是利用css制作一个 三角形
.box{ border: 20px transparent solid; display: block; width: 0; height: 0; border-top: none; border-color: transparent transparent black transparent; }效果就是这样： 可以通过调节border改变三角形的大小。
然后，做一个简单的下拉框，可以使用到这个三角形：
<div class="box1"> <ul> <a href="#"> <li>有一个下拉框 <div class="blue">下拉框来啦</div> </li> </a> </ul> </div> .box1 { background-color: rgb(109, 99, 92); height: 40px; line-height: 40px; width: auto; } .box1 ul a{ color: #fff; } .box1 ul li{ float: left; margin: 0 300px; position: relative; } .box1 ul li:hover{ color:rgb(158, 158, 243) ; } .box1 ul li .blue{ color: #fff; font-size: 14px; text-align: center; width: 100px; height: 100px; background-color: rgb(158, 158, 243); /* 设置一个阴影 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 设置下拉框在文字的正下方 */ position:absolute; left: -2px; display: none; } /*设置小三角形 */ .box1 ul li::after{ content: ''; border: 10px solid transparent; border-color: transparent ; border-bottom-color: rgb(158, 158, 243); border-top: none; position: absolute; left: 39px; top:30px; /* 设置隐藏 */ display: none; } /* 设置为鼠标放到导航栏时出现下拉框 */ .box1 ul:hover li .blue, .box1 ul:hover li::after{ display: block; }效果如图： 这样就可以做成一个简单的下拉框~
