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)


相关推荐

  • SEO优化网站教程百度_人员优化流程

    SEO优化网站教程百度_人员优化流程一准备1、心态长时间,不断学习。学习建站、基础代码、SEO全过程、实际操作并成功。2、价值与优势流量=价值。SEO是获得客户的技能,通过引流产生价值。①客户更精准,客户是主动的;②成本低、排名稳定、关键词有可扩展性。3、SEO工作①PC站优化:网站架构、页面关系、代码优化、链接推送等;WAP优化:继承PC站的优化成果,进行代码优化、移动适配;②内容发布:管理原创内容、转载内容、用户内容的更新频率与数量;③数据分析:关注收录量、收录率、展现量。④做日志分析,对服务器/网站进行监

  • 谷歌离线地图开发_谷歌实时在线街景地图

    谷歌离线地图开发_谷歌实时在线街景地图离线地图开发主要有两部分组成:1、获取离线地图数据;因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用;2、离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache提供的WEB服务器一样,他是一种准们的地图服务:提供了包括WEB服务、TMS服务、WMTS服务等等。离线地图数据的获取:可以通过【大地图下载器】下载到。要进…

  • ios发的gif图不动_怎么暂停gif

    ios发的gif图不动_怎么暂停gif其实网上GitHub有很多第三方的,但是用起来比较麻烦,这里介绍最简单的一种方式,自己就可以实现,(点击按钮开始播放动态图)1,集成SDWebImage之后,引入头文件#import"U

  • Linux 安装nodejs_pe安装linux

    Linux 安装nodejs_pe安装linuxlinux安装Node.js(详细)Node.js安装教程文章目录linux安装Node.js(详细)Node.js安装教程1:下载2:解压3:移动目录1:创建目录2:移动目录并重命名4:设置环境变量5:刷新修改6:安装完成,查看版本号1:下载wgethttps://nodejs.org/dist/v14.17.4/node-v14.17.4-linux-x64.tar.xz更多版本选择:===》更多nodejs版本下载2:解压tarxfnode-v14.17.4-linux-x64.

  • 求助,linux安装pycharm报错

    求助,linux安装pycharm报错错误如图,操作系统是银河麒麟v10sp1,下载的pycharm社区版2021.3.1.tar.gz,已安装jdk17!有没有没有知道的大神,告知一二!

  • 剑指Offer面试题:5.重建二叉树

    一题目:重建二叉树二思路先根据前序遍历序列的第一个数字创建根结点,接下来在中序遍历序列中找到根结点的位置,这样就能确定左、右子树结点的数量。在前序遍历和中序遍历的序列中划分了左、右子树结点的值

    2021年12月19日

发表回复

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

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