html下拉菜单怎么做？html下拉菜单的代码实例介绍

首先我们要知道html下拉菜单的代码是什么？

很明显是select元素可创建单选或多选菜单。

select> 元素中的option> 标签用于定义列表中的可用选项。

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

来看个下拉菜单代码的实例：

创建带有 4 个选项的选择列表：

select>
      option value ="volvo">
    PHP中文网/option>
      option value ="saab">
    百度/option>
      option value="oPEl">
    腾讯/option>
      option value="audi">
    新浪/option>
    /select>
    

就这样一个简单的下拉菜单就完成了，我们来看看效果：

这样是最基础的，如果加个css样式的话，就可以把这个表单做的很美观了。基本上没什么网站就这么做上去的，都是试试手的情况才这么做。

现在让你们看看真正的网站做的这种下拉框都像什么样子。

这里有个完整的代码实例：

!DOCTYPE html>
    html>
     head>
     meta charset="UTF-8">
     tITle>
    /title>
     style>
 .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;
 }
     /style>
     /head>
     body>
     div class="a">
     div class="b">
    PHP中文网/div>
     div class="c">
     ul>
     li>
    HTML在线学习/li>
    li>
    PHP在线学习/li>
    li>
    python在线学习/li>
     li>
    html5在线学习/li>
     /ul>
     /div>
     /div>
     /body>
    /html>
    

虽然多了点，可做成的效果可是很好的，让我们看看在浏览器中的怎么显示的吧。

这个是刚刷新的样式，现在看看鼠标放上去之后的变化：

完成之后就是这个样子，大家也可以去用这个代码试试，或者可以自己敲出这样代码出来，这样的样式，才是我们平时逛网站的时候的样子，一把鼠标移开这个效果就又恢复了上图的样式。

本篇关于HTML下拉菜单的文章到这也就结束了，有问题的可以在下方提问。

【小编推荐】

html中的document对象是什么？一篇文章让你了解document对象

HTML中添加图片的代码是什么？html如何正确的添加图片路径？

以上就是html下拉菜单怎么做？html下拉菜单的代码实例介绍的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！