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

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

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

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

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

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

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

PHP中文网

百度

腾讯

新浪

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

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

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

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

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; }

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

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

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

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

【小编推荐】

**

方法一：纯css实现下拉菜单

**

*{

margin: 0;

padding:0;

}

#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/

background: #eee;

width: 600px;

height: 40px;

margin: 0 auto;

}

#nav ul{/*去掉点点*/

list-style: none;

}

#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/

float: left;

line-height: 40px;

text-align: center;

position: relative;/*给子ul定位用的*/

}

#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/

text-decoration: none;

color:#000;

padding:0 10px;

display: block;

}

#nav ul li a:hover{

color: #fff;

background-color: #666;

}

#nav ul li ul {

position: absolute;/*相对于父li的位置进行定位*/

left: 0;

top:40px;

display: none;/*隐藏下拉菜单*/

}

#nav ul li ul li{

float: none;

background-color:red;

}

#nav ul li:hover ul{

display: block;

}

**

方法二：js实现下拉菜单

**

*{

margin: 0;

padding:0;

}

#nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/

background: #eee;

width: 600px;

height: 40px;

margin: 0 auto;

}

#nav ul{/*去掉点点*/

list-style: none;

}

#nav ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/

float: left;

line-height: 40px;

text-align: center;

position: relative;/*给子ul定位用的*/

}

#nav ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/

text-decoration: none;

color:#000;

padding:0 10px;

display: block;

}

#nav ul li a:hover{

color: #fff;

background-color: #666;

}

#nav ul li ul {

position: absolute;/*相对于父li的位置进行定位*/

left: 0;

top:40px;

display: none;

}

#nav ul li ul li{

float: none;

background-color:#eee;

}

function show(li){

var sub=li.getElementsByTagName("ul")[0];

sub.style.display="block";

}

function hide(li){

var sub=li.getElementsByTagName("ul")[0];

sub.style.display="none";

}