首页 > 编程学习 > CSS+DIV+UL+LI 实现简单下拉菜单
2010七月9

CSS+DIV+UL+LI 实现简单下拉菜单

<!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" />
<title>wizzer.cn</title>
<style type="text/css">
<!--
* {
margin:0px;
padding:0px;
font-family:"宋体";
font-size:12px;
text-align:center;
}
body ul{
margin:0px auto;
}
#mean{
width:500px;
margin:0px auto;
padding:0px;
}
#mean li{
float:left;
list-style-type:none;
width:80px;
padding:1px;
line-height:25px;
}
.a{
    background-color: #9DDFAA;
    color: #060;
    text-decoration: none;
    border: 1px solid #0C6;
    display: block;

}
.a:hover{
    color: #FFFFFF;
    background-color: #12581A;
    border: 1px solid #6AFF6A;
}
.list{
    width: 80px;

}
.list ul{
margin:0px auto;
padding:0px;
}
.list li{
    float: left;
    height: 18px;
    width: 80px;
}
.b{
    width: 80px;
    background-color: #55BF60;
    line-height:18px;
    display: block;
    text-decoration: none;
    color: #000;
    filter:Alpha(opacity=70);
}
.b:hover{
    background-color: #FFFFFF;
    color: #060;
    text-decoration: none;
    filter:Alpha(opacity=70);
}
.menu2{
    height: 26px;
    width: 80px;
    cursor:hand;
    overflow-y:hidden;
}
#keai{
    width:800px;
    height:50px;
    background-color:#4033D7;
    z-index:-1;
    position: absolute;
    left: 0px;
    top: 35px;
}
-->
</style>
</head>
<body>
<div id="mean">
<ul>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'">
<a href="#">网站首页</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li >
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">新闻公告</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">产品信息</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">最新推荐</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
<li onMouseOver="this.className='menu1'"
onMouseOut="this.className='menu2'"><a href="#">联系我们</a>
<div>
<ul>
<li><a href="#">我的主页</a></li>
<li><a href="#">我的空间</a></li>
<li><a href="#">我的相册</a></li>
<li><a href="#">我的日志</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>

1,810 total views, 1 views today

本文地址:https://blog.wizzer.cn/archives/190 , 转载请保留.

本文目前尚无任何评论.

发表评论