html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作[通俗易懂]

html导航栏可以展开的下拉菜单,html导航栏下拉菜单如何制作[通俗易懂]html导航栏下拉菜单如何制作发布时间:2020-09-2615:29:13来源:亿速云阅读:88作者:小新小编给大家分享一下html导航栏下拉菜单如何制作,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!我们要说的是html导航栏下拉菜单的制作,先看一个完整的实例代码:.dropdown{position:relative;display:inline-block;}.drop…

大家好,又见面了,我是你们的朋友全栈君。

html导航栏下拉菜单如何制作

发布时间:2020-09-26 15:29:13

来源:亿速云

阅读:88

作者:小新

小编给大家分享一下html导航栏下拉菜单如何制作,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

我们要说的是html导航栏下拉菜单的制作,先看一个完整的实例代码:

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;

}

.dropdown:hover .dropdown-content {

display: block;

}

这个代码大家能懂吗?

不懂也没事,这有解释,等解释完了你就会懂了。

html导航栏菜单实例解析:

html导航栏菜单的HTML部分:

我们可以使用任何的HTML元素来打开下拉菜单,如:,或a元素。

使用容器元素(如:

)来创建下拉菜单的内容,并放在任何你想放的位置上。

使用

元素来包裹这些元素,并使用CSS来设置下拉内容的样式。

html导航栏菜单的CSS部分:

.dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。

.dropdown-content类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意min-width的值设置为160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置width为100%(overflow:auto设置可以在小尺寸屏幕上滚动)。

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

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

看完了解释,现在有点懂了吗。把这些解释带到上面的代码上去,然后就懂了。

看,这就是代码的效果,有导航栏下拉列表,隐身的导航栏,鼠标移上去才有反应。

这就是导航栏下拉菜单的简单制作,有问题的可以在下方留言。

看完了这篇文章,相信你对html导航栏下拉菜单如何制作有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140241.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

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

关注全栈程序员社区公众号