html下拉菜单怎么做？html下拉菜单的代码实例介绍-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

本篇文章主要的介绍了关于HTML select标签下拉菜单的做法实例，还有一个html的一些网站的下拉菜单的用途都放在了文章中，下面就让我们一起来看看这篇文章吧

第一我们要知道html下拉菜单的代码是啥？

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

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

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

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

创立带有 4 个选项的选中列表：

<select>
  <option value ="volvo">PHP中文网</option>
  <option value ="saab">baidu</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>

虽然多了点，可做成的结果可是很好的，让我们看看在阅读器中的如何显示的吧。