CSS实现下拉菜单

最新推荐文章于 2024-08-24 09:00:00 发布

三爷麋了鹿

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量439

点赞数 1

分类专栏： html5学习

本文链接：https://blog.csdn.net/u800820/article/details/41867269

版权

html5学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

1.CSS实现下拉菜单重点在于用一个无序列表嵌套一个无序列表，父列表的position属性设置为relative，子列表的position设置成absolute。先将子列表隐藏起来display:none;当鼠标移到到父列表项上时，显示子列表display:block;

2.代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<title>css下拉菜单</title>
  	<meta charset="utf-8"/>
  	<style>
  		*{
  			margin:0;
  			padding:0;}
  		.nav{
  			background:#eee;
  			height:45px;}
  		ul{
  			list-style:none;}
  		ul li{
  			float:left;
  			line-height:45px;
  			text-align:center;
  			position:relative;}
  		a{
  			text-decoration:none;
  			color:#000;
  			display:block;
  			padding:0 20px;}
  		a:hover{
  			background:#CCC;
  			color:#00ffff;}
  		ul li ul{
  			position:absolute;
  			left:0;
  			top:45px;
  			display:none;}
  		ul li ul li{
  			float:none;
  			background:#eee;}
  		ul li:hover ul{
  			display:block;}
  	</style>
  </head>
  
  <body>
  	<div class="nav">
  		<ul>
  			<li><a href="#">首页</li></a>
  			<li><a href="#">下拉
  			  <ul>
  			    <li><a href="#">Javascript</li></a>
  			    <li><a href="#">Jquery</li></a>
  			    <li><a href="#">Css</li></a>
  			  </ul>	
  			</li></a>
  		</ul>
  	</div>
  </body>
</html>