本篇文章主要的介绍了关于html select标签下拉菜单的做法实例，还有一个html的一些网站的下拉菜单的用法都放在了文章中，下面就让我们一起来看看这篇文章吧
首先我们要知道html下拉菜单的代码是什么？
很明显是select元素可创建单选或多选菜单。
元素中的标签用于定义列表中的可用选项。
立即学习“前端免费学习笔记（深入）”；
提示：select 元素是一种表单控件，可用于在表单中接受用户输入。
来看个下拉菜单代码的实例：
创建带有 4 个选项的选择列表：
PHP中文网 百度 腾讯 新浪
就这样一个简单的下拉菜单就完成了，我们来看看效果：
这样是最基础的，如果加个css样式的话，就可以把这个表单做的很美观了。基本上没什么网站就这么做上去的，都是试试手的情况才这么做。
现在让你们看看真正的网站做的这种下拉框都像什么样子。
这里有个完整的代码实例：
.a{ width: 205px; } .b{ width: 200px; height: 50px; background-color: limegreen; text-align: center; line-height: 50px; color: #ffffff; } .c{ width: 200px; height: 300px; background-color: gainsboro; display: none; /*visibility: hidden;*/ } ul{ list-style: none; margin-left: -40px; } ul li{ line-height: 50px; display: block; width: 200px; text-align: center; } .a:hover{ cursor: pointer; } .a:hover .c{ display: block; } .a:hover .b{ background-color: green; } li:hover{ background-color: gray; color: #FFFFFF; } PHP中文网
- HTML在线学习
- PHP在线学习
- python在线学习
- html5在线学习
虽然多了点，可做成的效果可是很好的，让我们看看在浏览器中的怎么显示的吧。
这个是刚刷新的样式，现在看看鼠标放上去之后的变化：
完成之后就是这个样子，大家也可以去用这个代码试试，或者可以自己敲出这样代码出来，这样的样式，才是我们平时逛网站的时候的样子，一把鼠标移开这个效果就又恢复了上图的样式。
本篇关于HTML下拉菜单的文章到这也就结束了，有问题的可以在下方提问。
【小编推荐】
html中的document对象是什么？一篇文章让你了解document对象
HTML中添加图片的代码是什么？html如何正确的添加图片路径？
以上就是html下拉菜单怎么做？html下拉菜单的代码实例介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546917.html
微信扫一扫 
支付宝扫一扫 
