中国设计联盟
联网
平面设计 画册 VI欣赏 包装 CG-插画 搜索 个人网页 Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校 专题欣赏 SEO 图标欣赏 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
中国互联
艺魂宝库网
时代网
招聘求职
中资源
当前位置:网站综合首页 >> 网页JS特效 >> 页面导航类 >> 下拉菜单网页特效,效果很不错而且符合Web标准

下拉菜单网页特效,效果很不错而且符合Web标准

来源:中国设计秀    作者:    点击:1580     加入收藏    发表评论
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>www.webjx.com</title>

<style type="text/css">
<!--
/*Author:webjx.com*/
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid #9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px 0px 0px 0px;
cursor:hand;
overflow-y:hidden;
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#F5F5F5;
color:#999999;
border:1px solid #EEE8DD;
padding:6px 0px 0px 0px;
overflow-y:hidden;
cursor:hand;
}/*Author:webjx.com*/
-->
</style>
</head>
<body>

<div id="nav">
  <ul>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的首页 
  <div class="list">
    <a href="#">我的WEBJX</a><br />
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
    <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
  <div class="list">
    <a href="#">我的WEBJX</a><br />
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信 
  <div class="list">
    <a href="#">我的WEBJX</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理 
  <div class="list">
    <a href="#">我的WEBJX</a><br />
 <a href="#">我的首页</a><br />
 <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
    <a href="#">我的日志</a><br />
 <a href="#">我的相册</a><br />
 <a href="#">我的收藏</a><br />
  </div>
  </li>
  </ul>
</div>


</body>
</html>

2007-06-20 17:16:00    出处:
Google
热点文章/相关文章
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口