欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

利用CSS做下拉列表

程序员文章站 2024-01-26 16:09:00
...

第四篇
利用 :hover选择器 鼠标放上去后下拉列表出现，鼠标移走时列表消失。
效果图

利用CSS做下拉列表
利用CSS做下拉列表
利用CSS做下拉列表
利用CSS做下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="shortcut icon" href="hpu.png">
	<style>
	*{padding:0px;margin:0px;}
	header{background:#8f0;
		   width:100%;
		   height:100px;
		   margin-bottom:3px;
		   position:relative;
		   }
	 section{
		   width:100%;
		   height:600px;
			/*margin-bottom:5px;*/
		}
	#a1{background:cyan;
		width:30%;
		height:600px;
		float:left;
		margin-right:5px;
	    }
	#a2{background:#d45;
		width:39.5%;
		height:600px;
		float:left;
	}
	aside{background: purple;
		  width:29.5%;
		  height:600px;
		  float:right;
		}
	footer{background:#a50;
		   width:100%;
		   height:100px;
		   clear:both;
		   margin-top:5px;
		}
		
	nav{position:absolute;
		left:200px;
		top:55px;
	}

	ul{list-style: none;}
	ul li{float:left;}
	ul li a{display:block;
		text-decoration: none;
			background:#05f;
			color:#fff;
			font-weight: bold;
			height:40px;
			line-height:40px;
			margin-right: 1px;
			padding:0px 10px; 
	}
	ul li a:hover{background:#f90;}
	ul li ul{margin-top:1px;display:none;}
	ul li ul li{float:none;}
	ul li ul li a{border-bottom:1px solid white;}
	ul li:hover ul{display:block;}
	</style>
</head>
<body>
	
	<header>
		<nav>
			<ul>
				<li><a href="#">学校概况</a></li>
				<li><a href="#">管理机构</a></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>
				<li><a href="#">资环学院</a></li>
					</ul>
				</li>
				<li><a href="#">招生就业</a></li>
				<li><a href="#">科学研究</a></li>
			</ul>
		</nav>
	</header>
	<!-- section是中间的三部分 -->
	<section>
		<article id="a1"></article>
		<article id="a2"></article>
		<aside></aside>
	</section>
	<footer></footer>
</body>
</html>
相关标签： 笔记 css

上一篇： 在项目中操作 MySQL

下一篇： 数据收集之binlog同步---Canal

推荐阅读