纯css实现鼠标经过导航弹出下拉菜单特效

7个月前 (04-30 20:25)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

网站常用的导航菜单弹出效果，当用户的鼠标经过菜单栏时弹出一个下拉二级菜单，可根据自己的需求来自己美化。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>纯css实现鼠标经过导航弹出下拉菜单特效_武鸣人</title>
</head>
<style type="text/css">
 body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:500px;
height:355px;
background:#fff url(/img/20240430_www_wuming_ren_1.jpg) 0 20px no-repeat;
position:relative; 
margin:2em 125px 0 125px;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000; 
width:88px; 
height:1.5em;
font-weight:bold;
color:#888; 
border-bottom:8px solid #888;
background:#fff; 
padding-left:10px; 
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:98px;
w\idth:88px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}
/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */
/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000; 
border-bottom:8px solid #606;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:1.2em;
margin-top:11px;
left:0; 
width:96px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
color:#000; 
border:0;
margin:0;
color:#333;
font-weight:normal; 
font-size:0.9em;
height:auto; 
line-height:1em; 
padding:5px; 
width:86px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888; 
color:#fff;
}
/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter: alpha(opacity=80);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
opacity:0.8;
margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:96px; /* for IE5.5 faulty box model */
w\idth:86px; /* for IE6 */
}
p.strike {text-decoration:line-through;}
</style>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="menu">
<ul>
<li><a class="drop" href="https://www.wuming.ren">武鸣一号<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="https://www.wuming.ren" title="wuming.ren一号子菜单">一号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren二号子菜单">二号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren三号子菜单">三号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren四号子菜单">四号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren五号子菜单">五号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren六号子菜单">六号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren七号子菜单">七号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren八号子菜单">八号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren九号子菜单">九号子菜单</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="https://www.wuming.ren">武鸣二号<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="https://www.wuming.ren" title="wuming.ren一号子菜单">一号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren二号子菜单">二号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren三号子菜单">三号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren四号子菜单">四号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren五号子菜单">五号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren六号子菜单">六号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren七号子菜单">七号子菜单</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="https://www.wuming.ren">武鸣三号<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="https://www.wuming.ren" title="wuming.ren一号子菜单">一号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren二号子菜单">二号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren三号子菜单">三号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren四号子菜单">四号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren五号子菜单">五号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren六号子菜单">六号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren七号子菜单">七号子菜单</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="https://www.wuming.ren">武鸣四号<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="https://www.wuming.ren" title="wuming.ren一号子菜单">一号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren二号子菜单">二号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren三号子菜单">三号子菜单</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="https://www.wuming.ren">武鸣五号<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
<ul>
<li><a href="https://www.wuming.ren" title="wuming.ren一号子菜单">一号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren二号子菜单">二号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren三号子菜单">三号子菜单</a></li>
<li><a href="https://www.wuming.ren" title="wuming.ren四号子菜单">四号子菜单</a></li>
</ul>
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
<br>
<br>
<br>
<div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/874.html

鼠标感应弹出下拉菜单
回帖

纯css实现鼠标经过导航弹出下拉菜单特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息