1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML/CSS 如何做下拉框(下拉菜单)?

HTML/CSS 如何做下拉框(下拉菜单)?

时间:2023-09-10 03:02:55

相关推荐

HTML/CSS  如何做下拉框(下拉菜单)?

一、什么是下拉框

下拉菜单通常使用在鼠标过程中,当鼠标悬停是出现一个下拉的菜单。

二、如何用代码做下拉框

详细操作如下:

<!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;找好基准!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。