二级导航菜单[通俗易懂]

二级导航菜单[通俗易懂]本文用html5+css实现了二级导航菜单,二级导航菜单在网站建设中使用的越来越广泛。效果图如下:当鼠标悬停在一级菜单上时,出现二级下拉菜单二级下拉菜单可以被选中,当鼠标悬停上去时,变色。html代码<!DOCTYPEhtml><html><head><metacharset="UTF-…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本文用html5+css实现了二级导航菜单,二级导航菜单在网站建设中使用的越来越广泛。
效果图如下:
这里写图片描述
当鼠标悬停在一级菜单上时,出现二级下拉菜单
这里写图片描述
二级下拉菜单可以被选中,当鼠标悬停上去时,变色。
这里写图片描述
html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
<ul id="list">
<li>
<a href="#">菜单一</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li>
<a href="#">菜单二</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li>
<a href="#">菜单三</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li>
<a href="#">菜单四</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li>
<a href="#">菜单五</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

css代码

          *{ padding: 0px; margin: 0px; }
#main{ overflow: auto; text-align: center; }
a{ text-decoration: none; display: inline-block; height: 40px; width: 100px; color: white; background-color: darkgray; /*border: 1px solid red; box-sizing: border-box;*/ line-height: 40px; }
ul{ list-style: none; }
#list{ display: inline-block; margin: 0px; padding: 0px; vertical-align: bottom; }
#list>li{ float: left; }
#list>li>ul{ display: none; position: absolute; }
#list>li:hover ul{ display: block; }
a:hover { background-color: burlywood; }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)
blank

相关推荐

  • img图片加载失败默认图片「建议收藏」

    img图片加载失败默认图片「建议收藏」<img:src=”item.goods_pic”onerror=”javascript:this.src=’../static/images/default.png’;”>转载于:https://www.cnblogs.com/techliang666/p/8876842.html

  • 拉格朗日乘数法求得的是最值还是极值_微观经济拉格朗日方程求极值

    拉格朗日乘数法求得的是最值还是极值_微观经济拉格朗日方程求极值一、拉格朗日乘数法简介在日常的生产生活中,当我们要要安排生产生活计划的时候,常常会在现实物理资源约束的条件下,计算得到收益最大或者损失最小的计划;像这种对自变量有附加条件的极值称为条件极值;拉格朗日乘数法是一种直接计算解决条件极值的方法;拉格朗日乘数法的定义如下:设有f(x,y),φ(x,y)f(x,y),\varphi(x,y)f(x,y),φ(x,y)两个函数,并且两者都有一阶连续偏导数,则做拉格朗日函数为F(x,y,λ)=f(x,y)+λφ(x,y)F(x,y,\lambda)

  • LPCTSTR类型

    LPCTSTR类型如何理解LPCTSTR类型?L表示long指针这是为了兼容Windows3.1等16位操作系统遗留下来的,在win32中以及其他的32为操作系统中,long指针和near指针及far修饰符都是为了兼容的作用。没有实际意义。P表示这是一个指针C表示是一个常量T表示在Win32环境中,有一个_T宏这个宏用来表示你的字符是否使用UNICODE,如果你的

    2022年10月26日
  • route命令详解

    route命令详解route命令详解在网络中,route命令用来显示、添加、删除和修改网络的路由。1.route命令的格式route[-f][-p][Command][Destination][maskNetmask][Gateway][metricMetric][ifInterface]2.route-参数的含义:route-f:用于清除路由表。route-p:用于创建永久路由。routeComman:主要有print(打印路由)、ADD(添加路由)、DELETE(删

  • 生成对抗网络——GAN(一)「建议收藏」

    生成对抗网络——GAN(一)「建议收藏」Generativeadversarialnetwork据有关媒体统计:CVPR2018的论文里,有三分之一的论文与GAN有关!由此可见,GAN在视觉领域的未来多年内,将是一片沃土(CVer们是时候入门GAN了)。而发现这片矿源的就是GAN之父,Goodfellow大神。~~~生成对抗网络GAN,是当今的一大热门研究方向。在2014年,被Goodfellow大神提出来,当时的G…

    2022年10月28日
  • 又被鹅厂问懵逼了:TCP 四次挥手收到乱序的 FIN 包会如何处理?

    又被鹅厂问懵逼了:TCP 四次挥手收到乱序的 FIN 包会如何处理?大家好,我是小林。收到个读者的问题,他在面试鹅厂的时候,被搞懵了,因为面试官问了他这么一个网络问题:不得不说,鹅厂真的很喜欢问网络问题,而且爱问异常情况下的网络问题,之前也有篇另外一个读者面试鹅厂的网络问题:「被鹅厂面怕了!」。不过这道鹅厂的网络题可能是提问的读者表述有问题,因为如果FIN报文比数据包先抵达客户端,此时FIN报文其实是一个乱序的报文,此时客户端的TCP连接并不会从FIN_WAIT_2状态转换到TIME_WAIT状态。因此,我们要关注到点是看「在FIN_WAI

发表回复

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

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