css二级导航菜单的实现

最新推荐文章于 2022-05-01 13:20:46 发布

OK后后

最新推荐文章于 2022-05-01 13:20:46 发布

阅读量462

点赞数

分类专栏：页面展现

页面展现专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS二级菜单测试</title>
<style type="text/css">
.menu {
	font-family: verdana, sans-serif;
	width: 750px;
	position: relative;
	font-size: 0.85em;
	padding-bottom: 250px;
}

.menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.menu ul li {
	float: left;
	position: relative;
}

.menu ul li a,.menu ul li a:visited {
	display: block;
	text-decoration: none;
	color: #000;
	width: 139px;
	height: 3em;
	color: #000;
	border: 1px solid #fff;
	border-width: 1px 1px 0 0;
	background: #dfc184;
	padding-left: 10px;
	line-height: 3em;
}

* html .menu ul li a,.menu ul li a:visited {
	width: 149px;
	width: 139px;
}

.menu ul li ul {
	display: none;
}

table {
	margin: -1px;
	border-collapse: collapse;
	font-size: 1em;
}
/* specific to non IE browsers */
.menu ul li:hover a {
	color: #fff;
	background: #bd8d5e;
}

.menu ul li:hover ul {
	display: block;
	position: absolute;
	top: 3em;
	margin-top: 1px;
	left: 0;
	width: 150px;
}

.menu ul li:hover ul li ul {
	display: none;
}

.menu ul li:hover ul li a {
	display: block;
	background: #faeec7;
	color: #000;
	height: auto;
	line-height: 1.2em;
	padding: 5px 10px;
	width: 129px
}

.menu ul li:hover ul li a.drop {
	background: #c9c9a7;
}

.menu ul li:hover ul li a:hover {
	background: #c9c9a7;
	color: #000;
}

.menu ul li:hover ul li:hover ul {
	display: block;
	position: absolute;
	left: 150px;
	top: 0;
	width: 150px;
}

.menu ul li:hover ul li:hover ul.left {
	left: -150px;
}
</style>
</head>
<body>
	<div class="menu">
		<ul>
			<li><a href="javascript:void(0);">导航菜单</a>
				<table>
					<tr>
						<td>
							<ul>
								<li><a href="http://www.baidu.com/" title="百度首页">百度</a></li>
								<li><a href="http://www.google.com.hk/" title="Google首页">Google</a>
								</li>
								<li><a href="http://www.csdn.net/" title="csdn首页">Csdn</a>
								</li>
							</ul>
						</td>
					</tr>
				</table>
			</li>
		</ul>
	</div>
</body>
</html>

OK后后

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css二级导航菜单的实现

CSS二级菜单测试.menu { font-family: verdana, sans-serif; width: 750px; position: relative; font-size: 0.85em; padding-bottom: 250px;}.menu ul { padding: 0; margin: 0; list-style-ty
复制链接

扫一扫