首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
html、css 实现二级菜单「建议收藏」
因为一级菜单我是用ul li来做的,虽然ul是块级元素(display: block;),但是lidisplay: list-item;,多个是一行一行显示的
全栈程序员站长
2022/09/02
2.8K0
html、css 实现二级菜单「建议收藏」
二级菜单--竖排---HTML
二级菜单–竖排 ---- 这是作为回顾之前学习的东西 大家也可以康康作为一种回顾 二级菜单 —竖 排 不足的地方请大家指出来 代码照常 都有详细解释 效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级菜单 竖</title> <
宁在春
2022/10/31
3K0
二级菜单--竖排---HTML
一个Web二级菜单的实现(俺新手随便写的)
1、要求页面整洁、美观,与提供的页面效果图、结构保持一致,文字、背景的颜色不统一要求 2、要求HTML代码和CSS代码书写、命名符合规范
acc8226
2022/05/17
1.6K0
一个Web二级菜单的实现(俺新手随便写的)
【javaScript案例】之二级菜单的制作
这次实现的效果图如下: 二级菜单.gif 这个二级菜单实现的效果是: 当点击某一个框时,会将已经打开的框的内容收回,再展开现在点击的框的内容。 要如何实现这个效果呢? 我们可以step by step 首先我们要将整个框架显示出来,即所有框展开的样子,因为其显示/不显示是拿overflow:hidden做的。 但是要注意不要所有的框都拿一种类型的盒子做,因为那样不方便写js代码,毕竟我们之后的操作是点击绿色的框=>使得收起或展开白色的框,所以我们需要为每一个天数+对应课程的框放在一个div父盒子下。然后为其
xinxin-l
2022/03/29
7000
【javaScript案例】之二级菜单的制作
HTML+CSS制作二级菜单栏
链接:https://pan.baidu.com/s/1doPA17vy–QtSzUB8q9b8w 提取码:qq4o
全栈程序员站长
2022/08/10
3.5K0
HTML+CSS制作二级菜单栏
CSS+HTML 顶部导航栏实现「建议收藏」
2018/11/16更新: 最近在使用这个导航栏的时候,发现页面在放大和缩小的情况下,导航栏的布局和显示都有些小问题,所以重新改了一下css部分的代码,重新贴上来
全栈程序员站长
2022/09/01
3.7K0
我的DW个人网站设计——安徽宣城6页HTML+CSS+JavaScript
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。 <font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质
IT司马青衫
2022/08/24
6760
我的DW个人网站设计——安徽宣城6页HTML+CSS+JavaScript
jQuery练习——下拉菜单
实现效果:当鼠标移到不同的一级菜单,会显示相应的二级菜单,鼠标移走,二级菜单消失。
颜颜yan_
2022/12/01
28K0
jQuery练习——下拉菜单
JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug。 1 <ul class="nav"> 2 <li class="li"> 3 <a href="#">一级菜单</a> 4 <ul class="subNav"> 5 <li> 6 <a href="#">二级菜单</a> 7 <
xing.org1^
2018/05/17
8.9K0
html二级菜单的创建[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/133097.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
2.5K0
css实现导航菜单下拉效果「建议收藏」
效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。
全栈程序员站长
2022/09/19
3.1K0
css实现导航菜单下拉效果「建议收藏」
jQuery简单实现二级下拉菜单
下拉菜单原理:滑过一级的li才让第二层的li显示,利用jq简单的抓取元素,让一级下的二级li显示就能解决,使用jq比css的思路更加明确!
十月梦想
2018/08/29
4.8K0
vue——二级菜单demo
1、存数据:最开始想着一级菜单存一个数组,二级菜单存不同的数组。那么问题来了,一级菜单和二级菜单应该是超级相关联的,如果分开存储再去建立关系很麻烦,所以存在一个数组对象中,那么也就是说,不管多少级菜单都可以这样,又方便还不需要我们自己去建立相关关系。
全栈程序员站长
2022/09/05
1.9K0
WEB入门.九 导航菜单
上一章节中讲解了 background 属性的用法,以及两种主流的背景特效——页面图片整合技术以及滑动门技术,设计师可以使用这两种技术制作出多种页面背景特效,如平滑投票、Tab 导航菜单等。
张哥编程
2024/12/17
5630
WEB入门.九  导航菜单
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。 <font color='#b44846' size='4px'> ❤</font> 【作者主页——🔥获取更多优质
IT司马青衫
2022/08/16
8410
基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
三种方式实现网页二级菜单
首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。
全栈程序员站长
2022/08/13
2K0
基于html、css的个人网站(网页制作期末作业)
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作者: 历任研发工程师,
IT司马青衫
2022/08/15
2.2K0
基于html、css的个人网站(网页制作期末作业)
纵向、横向导航菜单及二级弹出菜单
首先在body中添加一个div标签,其中包含ulli ul的标签结构存放网站菜单,效果如下:
全栈程序员站长
2022/09/17
5.8K0
纵向、横向导航菜单及二级弹出菜单
Web前端开发实战4:导航菜单(一)「建议收藏」
在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同
全栈程序员站长
2022/09/17
7330
Web前端开发实战4:导航菜单(一)「建议收藏」
山东菏泽家乡网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法,如盒子的嵌套、浮动、margin、border、background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大学学习的前端知识点和布局方式都有运用,CSS的代码量也很足、很细致,使用hover来完成过渡效果、鼠标滑过效果等,使用表格、表单补充模块,为方便新手学习页面中没有使用js有需要的可以自行添加。 一、网页介绍📖 1 网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学
IT司马青衫
2022/08/21
5.3K0
山东菏泽家乡网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计
推荐阅读
相关推荐
html、css 实现二级菜单「建议收藏」
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验