导航下拉菜单Css实现

最新推荐文章于 2024-05-29 09:30:39 发布

sev_7en

最新推荐文章于 2024-05-29 09:30:39 发布

阅读量400

点赞数

分类专栏： CSS 文章标签： CSS 下拉菜单

本文链接：https://blog.csdn.net/sev_7en/article/details/53612378

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<style type="text/css">
		* {
			margin: 0px;               /*去掉全部间隙间隔*/
			padding: 0px;
		}
		.div {
			width: 450px;
			height: 40px;       
			background: #eee;         /*灰色背景*/
			margin: 0px auto;         /*浏览器自适应*/
		}
		.dropbtn,.drop-bt {
			list-style: none;         /*去掉列表样式(小圆点)*/
		}
		.dropdown {
			float: left;              /*左浮动*/
			position: relative;       /*****一级菜单相对定位*/
			line-height: 40px;        /*水平居中*/
			text-align: center;       /*垂直居中*/
		}
		a {
			text-decoration: none;    /*去掉超链接的下划线*/
			display: block;           /*将a行内元素转为块级元素*/ 
			width: 90px;
			height: 40px; 

		}
		a:hover {
			color: #fff;
			background: #666;         
		}
		.drop {
			float: right; 
			background-color: #eee;
			margin-top: 2px;

		}
		.dropbtn {
			position: absolute;       /******二级菜单绝对定位*/
			top: 40px;                /*向下偏移40px*/
			display: none;            /*默认状态下:鼠标离开隐藏;*/
			min-width: 90px;          /*最小宽度*/
		}
		.drop a:hover {
			background-color: #06F;
		}
		.dropdown:hover .dropbtn {               /**鼠标滑过一级菜单时显示二级菜单**/
			display: block;
		}

	</style>
</head>
<body>
	<div class="div">
		<ul class="drop-bt">
			<li class="dropdown"><a href="#"><h3>首页</h3></a></li>
			<li class="dropdown" id="dropdown"><a href="#">课程大厅</a>
				<ul class="dropbtn">
					<li class="drop"><a href="#">Java</a></li>
					<li class="drop"><a href="#">C++</a></li>
					<li class="drop"><a href="#">PHP</a></li>
					<li class="drop"><a href="#">Ios</a></li>
					<li class="drop"><a href="#">C</a></li>
				</ul>
			</li>
			<li class="dropdown"><a href="#">学习中心</a></li>
			<li class="dropdown"><a href="#">经典案例</a>
				<ul class="dropbtn">
					<li class="drop"><a href="#">案例解析</a></li>
					<li class="drop"><a href="#">案例详解</a></li>
				</ul>
			</li>
			<li class="dropdown"><a href="#">关于我们</a></li>
		</ul>
	</div>
</body>
</html>