如何创建html导航栏下拉菜单
发布时间： 2020-09-26 15:29:13
来源：亿速云
阅读： 88
作者：虚拟兔子
我将向您展示html导航栏下拉菜单是如何创建的。 我想读这篇文章取得很大的成果，一起讨论吧。
关于创建html导航栏下拉菜单，首先让我们来看看完整的实例代码。
. dropdown {
position: relative；
display :在线区块；
}
. dropdown-content {
显示：无；
位置： absolute；
背景色： # f9f9f 9；
最小窗口： 160 px；
box-shadow 33600 px8px 16 px0px rgba (0，0，0，0.2 )；
padding: 12px 16px；
z-index: 1；
}
. drop down : hover.drop down-content {
显示： block；
}
亿速云
职业介绍所世界！
职业介绍所世界！
这个代码大家明白吗？
不知道也没关系。 这有说明。 说明结束后就知道了。
解析html导航栏菜单实例：
html导航栏菜单的html部分：
可以使用任何HTML元素打开下拉菜单。 例如，a元素等。
使用容器元素(
)来创建下拉菜单的内容，并将其放置在您想要放置的位置。 使用
元素包装这些元素，并使用CSS设置下拉式内容的样式。 html导航栏菜单的CSS部分：
. dropdown类使用position:relative。 这将下拉菜单的内容放置在下拉按钮(使用position:absolute )的右下角。
. dropdown-content类具有实际的下拉菜单。 默认情况下隐藏，当鼠标移动到指定元素时显示。 最小宽度值设置为160px。 可以自由修改。 注意：要使：下拉列表内容与下拉按钮的宽度匹配，请将width设置为100%。 (overflow :自动设置可以在小屏幕上滚动。 )。
使用box-shadow属性，将下拉菜单看起来像“卡”。
:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
读了说明，现在明白了一点吗？ 把这些说明拿去上面的代码，然后就明白了。
看，这就是代码的效果。 有导航栏的下拉列表，隐藏的导航栏。 鼠标向上移动会有反应。
这是导航栏下拉菜单的简单创建。 有问题的人请在下面留言。
读了这篇文章，我相信你对html导航栏下拉菜单的制作方法有一定的了解，想了解更多的相关知识。 欢迎来到亿速云行业的信息频道。 感谢您的阅读。