一、什么是下拉框
下拉菜单通常使用在鼠标过程中,当鼠标悬停是出现一个下拉的菜单。
二、如何用代码做下拉框
详细操作如下:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{/*如果不定基准,默认找 body 做基准*/position: relative;}.select-box{display: none;}.box:hover .select-box{display: block;}.box > span{cursor: pointer;background-color: pink;display: flex;justify-content: center;align-items: center;height: 30px;width: 90px;}.select-box{width: 90px;background-color: antiquewhite;position: absolute;left: 0px;right: 30px;}.select-box > p{cursor: pointer}.select-box > p:hover{background-color: aqua;}</style></head><body><div class="box"><span>language</span><div class="select-box"><p>chinese</p><p>english</p></div></div><p>123</p></body></html>
总结:
做下拉框,最重要的一点就是要使用 position:relative;找好基准!