下拉菜单

最新推荐文章于 2022-05-26 22:18:32 发布

ly_zioyne

最新推荐文章于 2022-05-26 22:18:32 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/ly_zioyne/article/details/53525682

版权

代码：

<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	body,nav,ul,li{margin:0px;padding: 0px;}
	body{font-size: 12px;}
	nav{width:448px;height: 40px; margin:50px auto;}
	nav .menu{
	width: 100px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	border: 1px solid red;
	float: left;
	border-right: 0px;
	position: relative;

	}
	nav .aa{
	background: url(pic/icon.png) right -958px no-repeat;
	}
	nav .aa:hover{

	color: #ffffff;
	background: url(pic/icon.png) right -1035px no-repeat;
	background-color: #C600E6;

	}


	nav .aa:hover ul{
	display: block;
	}
	nav .menu:last-child{border-right: 1px solid red;}
	nav ul {width: 100px; position: absolute;left: -1px;display: none;}
	nav ul li{width: 100px; height: 40px;
	border: 1px solid #ccc;text-align: center;line-height: 40px;border-top:0px; list-style: none;color: #666666;}
	nav ul li:first-child{border-top: 1px solid blue;}
	nav ul li:nth-child(1):hover{
	background: red;color: #ffffff;
	}
	nav ul li:nth-child(2):hover{
	background: green;color: #ffffff;
	}
	nav ul li:nth-child(3):hover{
	background: blue;color: #ffffff;
	}
	nav ul li:nth-child(4):hover{
	background: #ccc;color: #ffffff;
	}
	nav ul li:nth-child(5):hover{
	background:#666666;color: #ffffff;
	}

	</style>
	</head>
	<body>
	<nav>
	<div class="menu aa">公司首页
	<ul>
	<li>博客专栏</li>
	<li>博客专家</li>
	<li>排行榜</li>
	<li>观点</li>
	<li>我的博客</li>
	</ul>
	</div>
	<div class="menu aa">我的知识
	<ul>
	<li>博客专栏</li>
	<li>博客专家</li>
	<li>排行榜</li>
	<li>观点</li>
	<li>我的博客</li>
	</ul>
	</div>
	<div class="menu aa">知识库列
	<ul>
	<li>博客专栏</li>
	<li>博客专家</li>
	<li>排行榜</li>
	<li>观点</li>
	<li>我的博客</li>
	</ul>

	</div>
	<div class="menu dd">特邀编辑
	<ul>
	<li>博客专栏</li>
	<li>博客专家</li>
	<li>排行榜</li>
	<li>观点</li>
	<li>我的博客</li>
	</ul>

	</div>
	</nav>
	</body>
	</html>

ly_zioyne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单

代码： charset="utf-8"> type="text/css"> body,nav,ul,li{margin:0px;padding: 0px;} body{font-size: 12px;} nav{width:448px;h
复制链接

扫一扫