Rumah >hujung hadapan web >html tutorial >html下拉菜单怎么做？html下拉菜单的实现方法
html下拉菜单怎么做？html下拉菜单的实现方法
- 不言asal
- 2018-10-19 11:42:1521519semak imbas
在浏览网站的时候，我们经常可以看到下拉菜单的效果，所以网页的开发过程中下拉菜单有时是不得不使用的，今天的这篇文章就来给大家分享一下html下拉菜单的实现方法，有需要的朋友可以参考一下。
话不多说，让我们来直接看正文~
在html中有一个select标签可以创建单选和多选菜单，select标签中的option属性用于定义列表中的可用选项。
下面我们就来看看html下拉菜单的具体代码：
<html> <body> <form> <select name="cars"> <option value="city">城市</option> <option value="hefei">合肥</option> <option value="wuhu">芜湖</option> <option value="nanjing">南京</option> <option value="gaoyou">高邮</option> </select> </form> </body> </html>
html下拉菜单效果如下：
在这里说明一下：select 元素是一种表单控件，可用于在表单中接受用户输入。
上面的这个html下拉菜单感觉太过单调，接下来我们就看看利用css来实现一个好看一点的下拉菜单。
html+css实现的下拉菜单代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 200px;
}
.b{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background: lightblue;
font-size: 30px;
}
.c{
height: 200px;
width: 100px;
display: none;
background: gray;
}
.b:hover{
background: green;
cursor: pointer;
}
.a:hover .c{
display: block;
}
a{
display: block;
text-decoration: none;
height: 40px;
text-align: center;
line-height: 40px;
color: #ccc;
}
a:hover{
background: green;
color: pink;
}
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
<div class="c">
<a href="#">合肥</a>
<a href="#">南京</a>
<a href="#">芜湖</a>
<a href="#">高邮</a>
<a href="#">上海</a>
</div>
</div>
</body>
</html>下拉菜单效果如下：
说明：上述代码中:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
本篇文章到这里就全部结束了，更多精彩内容大家可以关注php中文网的相关栏目！！！
Atas ialah kandungan terperinci html下拉菜单怎么做？html下拉菜单的实现方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html中form表单的内标签是什么？如何使用 ？Artikel seterusnya：Web应用中富交互的撤销与前进操作的实现方法介绍（代码）