html5下拉菜单-如何制作html导航栏的下拉菜单？

使用

元素来包装该元素并使用 CSS 来设置下拉内容的样式。

html导航栏菜单的CSS部分：

.dropdown 类使用position:relative，它将设置下拉菜单的内容放置在下拉按钮的右下角（使用position:absolute）。

.dropdown-content 类内部是实际的下拉菜单。 默认隐藏，键盘连接到指定元素后才会显示。 请注意，最小宽度值设置为 160px。 您可以随心所欲地更改它。 注意：如果想设置下拉内容与下拉按钮长度相同，可以将宽度设置为100%（overflow:auto设置可以在小屏幕上滚动）。

我们使用 box-shadow 属性使下拉菜单看起来像一张“卡片”。

:hover 选择器用于在用户将键盘连接到下拉按钮时显示下拉菜单。

看完解释，你是不是有点明白了呢？ 把这个解释带入前面的代码中，后面你就明白了。

现在我们看一下上面代码在浏览器中显示的效果：

图一.png

这是默认的，根本无法读取，就像文本一样，只要你移动键盘它就会改变：

兔儿.png

看，这就是代码的功效。 导航栏中有一个下拉列表，一个看不见的导航栏html5下拉菜单，只有移动键盘时才会有反应。

这是导航栏下拉菜单的简单创建。 如果您有任何疑问html5下拉菜单，可以在下方留言。