利用CSS做下拉列表

最新推荐文章于 2022-12-01 20:15:05 发布

七里香777

最新推荐文章于 2022-12-01 20:15:05 发布

阅读量645

点赞数 2

分类专栏：笔记 # CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44286392/article/details/106452170

版权

笔记同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

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

下拉列表效果图
网站前的LOGO
实现代码
LOGO

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

七里香777

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
利用CSS做下拉列表

第四篇利用 :hover选择器鼠标放上去后下拉列表出现，鼠标移走时列表消失。效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="shortcut icon" href="hpu.png"> <style> *{padding:0px;
复制链接

扫一扫

专栏目录