html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决

最新推荐文章于 2024-05-27 17:27:19 发布

LL__Sunny

最新推荐文章于 2024-05-27 17:27:19 发布

阅读量1.4w

点赞数 57

分类专栏： html 文章标签： css ul 和 li a 二级菜单（横向）鼠标悬停

本文链接：https://blog.csdn.net/LL__Sunny/article/details/103347206

版权

html 专栏收录该内容

16 篇文章 5 订阅

订阅专栏

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

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

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

在这里插入图片描述

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

<!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>