jQuery+CSS打造的标准型二级下拉菜单

最新推荐文章于 2024-10-18 17:51:23 发布

dfsfdsds5241

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量84

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/csr04/archive/2012/08/23/2652805.html

版权

<!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=utf-8 " />
<title>jQuery+CSS打造的标准型二级下拉菜单丨芯晴网页特效丨CsrCode.Cn</title>
<script type= " text/javascript " src= " /images/jquery-1.4.2.min.js "></script>
<style type= " text/css ">
body
{
margin: 0; padding: 0; font-size:12px;
}
a:link {
color:#1553a9; text-decoration: none;
}
a:visited {
text-decoration:none; color: #1553a9;
}
a:hover {
text-decoration:none; color: #f46662;
}
a:active {
text-decoration: none; color:#f46662;
}
#main
{
width:910px; margin: 0 auto;
}
#menu
{
margin-top:20px; position:absolute;
}
.m1
{
float:left; width:100px; text-align:center; color:#3a3a3a; background-color:#bcbcbc; border:#9a9b9b 1px solid; border-right: 0; padding:10px; padding-top:13px; cursor:pointer;
}
.m1:hover
{
background-color:#2c85e0; color:White;
}
.m2
{
  position:absolute; margin-top:39px; width:120px; background-color:#e4e4e4;border:#cdcece 1px solid;color:# 666666; display:none;
}
.m2 table
{
width: 100%; line-height:35px;
}
.m2 table tr td
{
text-align:center; border-top:#b4b4b4 1px dotted; cursor:pointer;
}
</style>
<script type= " text/javascript ">
$(function(){
$( " .m1 ").mouseover(function(){
$( this).parent().next( " .m2 ").fadeIn();
}).mouseout(function(){
$( this).parent().next( " .m2 ").css( " display ", " none ");
});

$( " .m2 ").mouseover(function(){
$( this).css( " display ", " block ");
$( this).prev().children().css( " background-color ", " #2c85e0 ").css( " color ", " White ");;
}).mouseout(function(){
$( this).css( " display ", " none ");
$( this).prev().children().css( " background-color ", " #bcbcbc ").css( " color ", " #3a3a3a ");

});

});
</script>
</head>
<body>
<div id= " main ">
<div id= " menu ">
<a href= " # " target= " _blank "><span class= " m1 ">论坛首页</span></a>
<a href= " # " target= " _blank "><span class= " m1 ">学生工作</span></a>
<div class= " m2 " style= " left:121px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">学院首页</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院首页</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院首页</a></td></tr>
</table></div>
<a href= " # " target= " _blank "><span class= " m1 ">师资队伍</span></a>
<div class= " m2 " style= " left:242px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">学院首页</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院首页</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院首页</a></td></tr>
</table></div>
<a href= " # " target= " _blank "><span class= " m1 ">学科专业</span></a>
<div class= " m2 " style= " left:363px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">本科专业</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">硕士专业</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">博士专业</a></td></tr>
</table></div>
<a href= " # " target= " _blank "><span class= " m1 ">教学改革</span></a>
<div class= " m2 " style= " left:484px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">教学体制</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院首页</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">科研教学</a></td></tr>
</table></div>
<a href= " # " target= " _blank "><span class= " m1 ">党建工作</span></a>
<div class= " m2 " style= " left:605px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">学生党建</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学院党建</a></td></tr>
</table></div>
<a href= " # " target= " _blank "><span class= " m1 ">联系我们</span></a>
  <div class= " m2 " style= " left:725px; "><table>
  <tr><td style= " border:0 "><a href= " # " target= " _blank ">老师电话</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">领导传真</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">学校地址</a></td></tr>
  <tr><td><a href= " # " target= " _blank ">卫星地图</a></td></tr>
</table></div>
</div>
</div>
</body>
</html>

<br><br><br><br><br><br><br><br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href= " /images/jquery-1.4.2.min.js ">jquery- 1.4. 2.min.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/23/2652805.html

dfsfdsds5241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫