利用CSS的hover伪类实现的下拉菜单效果

模板网 2014-12-03

利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。

效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>利用CSS的hover伪类实现的下拉菜单效果</title>
<style>
	* {margin:0;padding:0;}
	a {color:#FFF;text-decoration:none;}

	.top {width:100%;height:42px;background:#BE0028;}
	.top .nav {margin:0 auto;width:1000px;}
	.top .nav a {width:80px;height:42px;line-height:42px;text-align:center;display:block;float:left;font-weight:bold;position:relative;}
	.top .nav a:hover {background:#333;}
	.top .nav a .box {width:600px;height:240px;background:#333;position:absolute;top:42px;left:-260px;display:none;}
	.top .nav a:hover .box {display:block;}
</style>
</head>
<body>
	<div class="top">
		<div class="nav">
			<a href="">首页</a>
			<a href="">新闻
				<div class="box"></div>
			</a>
			<a href="">视频
				<div class="box"></div>
			</a>
			<a href="">音乐
				<div class="box"></div>
			</a>
			<a href="">知道
				<div class="box"></div>
			</a>
			<a href="">购物
				<div class="box"></div>
			</a>
			<a href="">论坛</a>
		</div>
	</div>
<!--来源:	医疗模板库(http://www.120muban.com) -->
</body>
</html>

相关文章

  1. CSS blockquote美化效果

    blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个

  2. CSS仿Win7对话框黑色阴影效果

    CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:

  3. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图：

  4. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：

  5. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

随机推荐

  1. CSS blockquote美化效果

    blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个

  2. CSS仿Win7对话框黑色阴影效果

    CSS仿Win7对话框黑色阴影效果，采用了CSS3的一个新属性，对所有新版本浏览器都支持，老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器，分别对应着三个属性：box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:

  3. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图：

  4. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果，未使用任何js代码，简单方便。 效果截图：

  5. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html