Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >html二级菜单:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决「建议收藏」

html二级菜单:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决「建议收藏」

作者头像
全栈程序员站长
发布于 2022-08-11 12:56:41
发布于 2022-08-11 12:56:41
6.1K00
代码可运行
举报
运行总次数:0
代码可运行

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

html二级菜单制作(横排二级下拉菜单)以及二级菜单出现错位怎么解决

摘要:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决(解决办法放在代码下面)

1.先看一下最终的效果图

2. 来先看具体代码吧,设计的具体思路就放在代码下面哈哈哈ヾ(≧▽≦*)o

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二级菜单</title>
	<style>
   	  	/*去除网页原有的格式*/
		* { 
    margin:0; padding:0;}
		/*去除标签前的圆点*/
		ul, li { 
    list-style:none;}
		/*去除下划线*/
		a { 
    text-decoration:none;}
		/*盛放二级菜单的盒子*/
		.mxl_bigbox_10{ 
   
			width: 620px;
			height:300px;
			background-color: pink;
			margin: 15px auto auto  30%;
			float:left;
			position: relative;
			padding-left:15px;
			padding-top: 15px: 

		}
		ul li{ 
   float:left; }
		ul li a{ 
   
			width:120px;
			height:30px;
			font-size: 20px;
			text-align: center;
			font-family: 宋体;
			line-height: 25px;
			/*将元素显示为块级元素display:block;*/
			display: block;
			border-right:2px solid silver;
            border-bottom: 0.3px solid silver;
            background-color: #E8E8E8;
            color:black;


		}
		/*鼠标悬停改变背景颜色*/
		ul li a:hover{ 
   background-color:aqua; }
		/*display:none;用来隐藏二级菜单 */
		ul li ul{ 
   
			position: absolute;
			display:none;
		}
		/*float:none;使二级菜单不左右浮动也是默认值*/
		ul li ul li{ 
   
			float: none;
		}
		ul li ul li a{ 
   
				border-top:1px dashed silver; 
		}
		/*在鼠标移到li上的时候它下面的ul会显示*/	
		ul li:hover ul{ 
   display:block;}



	</style>
		
</head>
<body>
			
	<div  class="mxl_bigbox_10">
			<ul>
				<li><a href="#">首页</a>
					<ul>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
					</ul>					
				</li>

				<li><a href="">验收专栏</a>
					 <ul>						
							<li><a href="#">2级菜单</a></li>
							<li><a href="#">2级菜单</a></li>
							<li><a href="#">2级菜单</a></li>
							<li><a href="#">2级菜单</a></li>
							<li><a href="#">2级菜单</a></li>
					 </ul>

				</li>
				
				<li><a href="">专业概况</a>
					<ul>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
					</ul>
				</li>

				<li><a href="">教学资源</a>
					<ul>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
					</ul>
				</li>

				<li><a href="">获奖状况</a>
					<ul>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
						<li><a href="#">2级菜单</a></li>
					</ul>
				</li>

			</ul>

	</div>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>进行许可。

</body>
</html>

3.二级菜单出现错位解决办法如下:

错位原因:再css样式里即内没有添加去掉网页原有属性的代码(* { margin:0; padding:0;}),接下来我把源代码里的 * { margin:0; padding:0;}注释掉来看看网页打开后的效果图:

很明显已经错位了!

ヾ(≧▽≦*)o😊喜欢的话就留个赞吧!

😊😊布局思路:通过 ul li ul li的嵌套以及使用div 、css 、a三种标签来一起实现二级菜单。

具体步骤如下:

1. 首先在body部分用div标签做一个盒子,在盒子内部(div内部) 用“<ul><li><a>一级菜单</a></li></ul>”生成一级菜单然, 但是此时所有一级菜单带式竖向排列的,每个一级菜单还需要在style内把一级菜单通过“display:block;”设置成块,再给他们加上边框;
2.然后通过“float:left;”控制浮动,这样横向排列的一级菜单就好了;一些细节方面比如一级菜单的边框颜色、像素大小、背景色文字在框里的位置都得设置好。
3.接着在一级菜单里嵌入二级菜单即<ul><li><a>一级菜单</a><ul><li><a>二级菜单</a></li></ul></li></ul>
4.嵌入后接下来控制二级菜单的样式,通过绝对定位使二级菜单出现在一级菜单下然后隐藏即“{ position:absolute; display:none;}”,但是这时二级菜单还是横向排列的,只需用“float:none;”不让其左右浮动就可以完成。
5.最后,当鼠标移动到一级菜单上时二级菜单这时时显示不出来的,还需要添加“ul li:hover ul{ display:block}”使二级菜单显示出来;下面的文字部分和图片部分是用两个小盒子,通过类选择器独立控制各自的样式。

🎈🎈🎈注意点:盛放二级菜单的盒子宽度,要根据标签的宽度来决定 ;比如你的ul li {width: 60px;height:30px} 有六个一级菜单,那么60*6=360那么你的盒子的宽度要至少大于300左右;

🎈🎈🎈 padding属性还会撑大盒子,所以在调节标签里的文字居中时尽量不要用padding,建议使用text-align:center;和line-height:多少px;一起使用,主要调节line-height,就可以;文字的大小尽量小点,不然还是会出现问题。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/131357.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Go语言条件语句
Go语言的条件语句在概念和流程上与其他编程语言完全相同,因此这里不再赘述,写法上结合了Python和C++,即条件表达式不需要加括号,但仍然保留了花括号。具体例子见下:
Steve Wang
2020/12/22
6220
java的if else语句入门
条件语句,是程序中根据条件是否成立进行选择执行的一类语句,这类语句在实际使用中,难点在于如何准确的抽象条件。例如实现程序登录功能时,如果用户名和密码正确,则进入系统,否则弹出“密码错误”这样的提示框等。
全栈程序员站长
2022/07/17
2.7K0
Java的基本数据类型boolean(一)
Java的基本数据类型之一是布尔类型(Boolean),也称为逻辑类型,它只有两个值:true和false。在Java编程中,布尔类型通常用于条件测试,如if语句、while循环、for循环等。
玖叁叁
2023/05/06
1.3K0
Java基础知识-if条件语句的使用介绍
林老师带你学编程
2018/01/04
1.4K0
C语言和Java的boolean数据类型差异对比
在 Java 中,布尔值类型是通过 boolean 类型来定义的。Java 中的布尔类型非常严格,只能接受两个常量值:
CSDN-Z
2025/02/19
1670
C语言和Java的boolean数据类型差异对比
Java基础语法(四)基本语法和数据类型
假如我们想定义一个名为helloWorld的字符串”Hello World!”,我们需要这样做
全栈程序员站长
2021/04/23
5080
大数据必学Java基础(二十):流程控制的引入和if语句介绍
流程控制语句是用来控制程序中各语句执行顺序的语句,可以把语句组合成能完成一定功能的小逻辑模块。
Lansonli
2022/07/17
3590
大数据必学Java基础(二十):流程控制的引入和if语句介绍
JAVA语言程序设计(一)04747
大家好,又见面了,我是你们的朋友全栈君。 indows常用快捷键和常见命令 省略100万行 二进制=>0、1 一个字节是八位。每个0或者每个1都叫做是bit 二进制的计算,除2除到余数为一,一算到最后一位,结果需要倒过来。 上述直接操作 字节 是计算机中最小的存储单元,计算机储存的任何数据都是以字节的形式存储的。 1KB = 1024 Byte 1MB = 1024 KB 命令提示符常用的命令 D:可以直接切换到d盘 根路径就是最高的一层的路径 总结:切换盘符就是 你需要切换
全栈程序员站长
2022/09/08
5.8K0
java中的if
if语句是Java语言中的一种条件语句,用于在程序运行时基于给定的条件选择要执行的语句块。if语句的基本语法结构如下:
堕落飞鸟
2023/04/01
2.6K0
Java的基本数据类型boolean(二)
在Java中,布尔变量只能有两个值:true和false。如果我们试图将其他类型的值赋给布尔变量,将会发生编译错误。例如
玖叁叁
2023/05/06
4560
Java基础之流程控制
如果是false,就继续判断比较表达式2的值,看是true还是false。
南风
2019/04/22
3880
第三天 引用类型选择结构循环结构【悟空教程】
第1章 引用类型的使用 1.1 引用数据类型的使用格式 与定义基本数据类型变量不同,引用数据类型的变量定义及赋值有一个相对固定的步骤或格式。 导包: 使用import导包,在类的所有代码之前导包(找到要使用的类型) 定义变量,并创建对象赋值: 数据类型 变量名 = new 数据类型(); 调用方法,每种引用数据类型都有其功能,我们可以调用该类型实例的功能: 变量名.方法名(); 1.2 键盘录入:Scanner类 Scanner类是引用数据类型的一种,我们可以使用该类来完成用户键盘录入,终
Java帮帮
2018/06/11
1.2K0
java基础学习_基础语法(上)02_day03总结
============================================================================= =============================================================================
黑泽君
2018/10/11
4120
Java基础入门笔记02——文档注释,JavaDos文件,数据类型,类型转换,变量默认值问题
JavaDoc是Sun公司提供的一个技术,它从程序源代码中抽取类、方法、成员等注释形成一个和源代码配套的API帮助文档。用于解释包或者方法或者类的作用
全栈程序员站长
2022/09/21
4810
Java基础入门笔记02——文档注释,JavaDos文件,数据类型,类型转换,变量默认值问题
Java程序设计的基本结构 - 选择结构
使用if-else选择结构时,一个最基本的原则就是一定会有一个判断条件,并且如果出现else一定会有一个与之对应的if。
一头小山猪
2020/04/10
7280
java从入门到精通二(Java基本语法,关键字,数据类型)
序言:这篇文章来总结java编程基础相关的知识。由于内容比较多,可能会分成几章来总结。话不多说,进入内容。 1:java的基本语法: 1.1:java代码的基本格式: 我们来看上期的代码片
兰舟千帆
2022/07/16
3720
java从入门到精通二(Java基本语法,关键字,数据类型)
【java基础】java关键字总结及详解
Java关键字是电脑语言里事先定义的,有特别意义的标识符,有时又叫保留字,还有特别意义的变量。Java的关键字对Java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名、方法名、类名、包名和参数。
全栈程序员站长
2022/09/08
4990
JAVA基础语法~炼丹必备保姆级攻略!快收藏!
Java 是一门面向对象的编程语言,具有跨平台、安全、健壮等特性。它由 Sun Microsystems 公司开发,后被 Oracle 收购。Java 的应用场景广泛,涵盖 Web 开发、移动应用开发、企业级应用开发、大数据处理等领域 。
钮祜禄.爱因斯晨
2025/06/11
910
Java入门系列-05-数据类型和类型转换
在上一篇文章中我们学会了如何使用变量,像这样存储一个整数 int age=10;,可以在开发工具中编写一行这样的代码 int age=10.5; 就会发现开发工具报错了,是因为变量中的数据类型也是不能随便用的。
享智同行
2019/05/15
6120
Java入门系列-05-数据类型和类型转换
Java测试题及答案(Java干货完整试卷)
都是一些非常非常基础Java入门学习的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,但是IT公司就喜欢考这些基础的东西,所以为了能进大公司就~~~当复习期末考吧。花了不少时间整理,在整理过程中也学到了很多东西,请大家认真对待每一题~~~
全栈程序员站长
2022/09/15
1.5K0
Java测试题及答案(Java干货完整试卷)
推荐阅读
相关推荐
Go语言条件语句
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验