您的位置 首页 html教程

html下拉菜单怎么做?html下拉菜单的实现方法

在浏览网站的时候,我们经常可以看到下拉菜单的效果,所以网页的开发过程中下拉菜单有时是不得不使用的,今天的这篇文章就来给大家分享一下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下拉菜单效果如下:

2345截图20181019110142.png

在这里说明一下: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>

下拉菜单效果如下:

2345截图20181019113637.png

说明:上述代码中:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的相关栏目!!!

以上就是html下拉菜单怎么做?html下拉菜单的实现方法的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:html下拉菜单怎么做?html下拉菜单的实现方法

文章地址:https://www.pyhw.net/34071_html%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e6%80%8e%e4%b9%88%e5%81%9a%ef%bc%9fhtml%e4%b8%8b%e6%8b%89%e8%8f%9c%e5%8d%95%e7%9a%84%e5%ae%9e%e7%8e%b0%e6%96%b9%e6%b3%95.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图