纯Css鼠标经过下拉菜单

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> CSS教程 >> 纯Css鼠标经过下拉菜单

发布于2008-07-31 09:57 来源：网海拾贝

纯Css鼠标经过下拉菜单

以下是代码片段：
<!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" lang="gb2312" xml:lang="gb2312">
<head>
<title>精美纯Css鼠标经过下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
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:#539D26;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
left: 198px;
top: 25px;
}
.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;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.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;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" >酷站首页
<div class="list">
  <a href="http://www.xland.com.cn">我的Png</a><br />
        <a href="http://www.xland.com.cn">我的Gif</a><br />
        <a href="http://www.xland.com.cn">我的酷站</a><br />
  <a href="http://www.xland.com.cn">我的日志</a><br />
        <a href="http://www.xland.com.cn">我的相册</a><br />
        <a href="http://www.xland.com.cn">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区圈子
<div class="list">
  <a href="http://www.xland.com.cn">我的CHINAY</a><br />
        <a href="http://www.xland.com.cn">我的首页</a><br />
        <a href="http://www.xland.com.cn">我的日志</a><br />
        <a href="http://www.xland.com.cn">我的相册</a><br />
        <a href="http://www.xland.com.cn">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">我的短信
<div class="list">
  <a href="http://www.xland.com.cn">我的CHINAY</a><br />
        <a href="http://www.xland.com.cn">我的相册</a><br />
        <a href="http://www.xland.com.cn">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">账户管理
<div class="list">
  <a href="http://www.xland.com.cn">我的CHINAY</a><br />
        <a href="http://www.xland.com.cn">我的首页</a><br />
        <a href="http://www.xland.com.cn">我的日志</a><br />
        <a href="http://www.xland.com.cn">我的相册</a><br />
        <a href="http://www.xland.com.cn">我的收藏</a><br />
  <a href="http://www.xland.com.cn">我的日志</a><br />
        <a href="http://www.xland.com.cn">我的相册</a><br />
        <a href="http://www.xland.com.cn">我的收藏</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>

纯Css鼠标经过下拉菜单来自来色理想论坛。

中查找“纯Css鼠标经过下拉菜单”更多相关内容

中查找“纯Css鼠标经过下拉菜单”更多相关内容

上一篇：CSS兼容问题资料汇集
下一篇：纯css圆角气泡效果代码

最近更新

赞助商

·网站设计Tab标签切换的效果制作	11-07
·21个好玩、有趣味、实验性的css技术运用..	11-07
·IE与FireFox在JavaScript和Css上的几处区别	10-28
·CSS加JS让图片自动适应大小，任意浏览器..	10-28
·FireFox浏览器和IE浏览器下CSS兼容问题	10-21
·Web开发期待的CSS的一些功能	10-21
·css教程：网页字体及字体大小的设计	09-18
·CSS Alpha透明相关知识学习	09-18
·关于W3C CSS标准的一些经验	09-18
·div+css制作网页实战笔记心得	09-18
·CSS网页布局的好处与坏处	09-18