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

使用

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

html导航栏菜单的CSS部分：

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

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

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

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

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

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

图一.png

这是默认的导航栏html5，根本看不到，就像一段文字，但是当你移动键盘时，它就会改变：

兔儿.png

看，这就是代码的疗效。 有一个导航栏的下拉列表，一个隐形的导航栏，鼠标只有移动的时候才会有反应。

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