利用CSS的hover伪类实现的下拉菜单效果
利用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>
相关文章
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图:
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果,采用了CSS3的一个新属性,对所有新版本浏览器都支持,老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器,分别对应着三个属性:box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图:
随机推荐
- CSS改变选中文本背景色和文字颜色
CSS改变选中文本背景色和文字颜色。 效果截图:
- 手机站底部导航条效果自适应手机屏幕大小
手机站底部导航条效果自适应手机屏幕大小 代码打包下载: 手机站底部导航条效果自适应手机屏幕大小 效果截图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- CSS仿Win7对话框黑色阴影效果
CSS仿Win7对话框黑色阴影效果,采用了CSS3的一个新属性,对所有新版本浏览器都支持,老版本的浏览器部分不支持。 兼容IE新版、Google浏览器、火狐浏览器,分别对应着三个属性:box-shadow、-webkit-box-shadow、-moz-box-shadow。 效果图: