html下拉菜单怎么做？

　　话不多说，让我们来直接看正文~

　　在html中有一个select标签可以创建单选和多选菜单，select标签中的option属性用于定义列表中的可用选项。

　　下面我们就来看看html下拉菜单的具体代码：

　　<html>

　　<body>

　　<form>

　　<selectname="cars">

　　<optionvalue="city">城市</option>

　　<optionvalue="hefei">合肥</option>

　　<optionvalue="wuhu">芜湖</option>

　　<optionvalue="nanjing">南京</option>

　　<optionvalue="gaoyou">高邮</option>

　　</select>

　　</form>

　　</body>

　　</html>

　　html下拉菜单效果如下：

　　2345截图20181019110142.png

　　在这里说明一下：select元素是一种表单控件，可用于在表单中接受用户输入。

　　上面的这个html下拉菜单感觉太过单调，接下来我们就看看利用css来实现一个好看一点的下拉菜单。

　　html+css实现的下拉菜单代码：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

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

　　}

　　display:block;

　　text-decoration:none;

　　height:40px;

　　text-align:center;

　　line-height:40px;

　　color:#ccc;

　　}

　　a:hover{

　　background:green;

　　color:pink;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="a">

　　<divclass="b">城市</div>

　　<divclass="c">

　　<ahref="#">合肥</a>

　　<ahref="#">南京</a>

　　<ahref="#">芜湖</a>

　　<ahref="#">高邮</a>

　　<ahref="#">上海</a>

　　</div>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54457.shtml