CSS+HTML+JQuery简单菜单
1. [代码]style
<style type="text/css">
body,ul,li,a{
margin:0;
padding:0
}
ul,li{
list-style-type:none
}
.menu{
width:270px;
height:30px;
line-height:30px;
background:#0f67a1
}
.menu li{
width:80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}
.menu li:hover{
background:#426d9c;
}
.menu .menuUl{
width:50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}
.menuUl li{
width:100%;
float:left;
text-align:left;
}
a{
color:#eee;
text-decoration: none
}
a:hover{
color:#000;
text-decoration: none
}
</style>
2. [代码]script
<script type="text/javascript">
$(document).ready(function(){
$(".menu li").hover(
function(){
$(this).find(".menuUl").show('50');
},
function(){
$(this).find(".menuUl").hide('50');
}
);
})
</script>
3. [代码]body
<body>
<ul class="menu">
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
</ul>
</body>
4. [文件] jquery-1.7.2.min.js ~ 93KB 下载(29)
5. [文件] 完整文件
<!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>http://www.huiyi8.com/dongman/weimei/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/main.css" rel="stylesheet" />
<script type="text/javascript" src="js/vendor/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".menu li").hover(
function(){
$(this).find(".menuUl").show('50');
},
function(){
$(this).find(".menuUl").hide('50');
}
);
})
</script>
<style type="text/css">
body,ul,li,a{
margin:0;
padding:0
}
ul,li{
list-style-type:none
}
.menu{
width:270px;
height:30px;
line-height:30px;
background:#0f67a1
}
.menu li{
width:80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}
.menu li:hover{
background:#426d9c;
}
.menu .menuUl{
width:50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}
.menuUl li{
width:100%;
float:left;
text-align:left;
}
a{
color:#eee;
text-decoration: none
}
a:hover{
color:#000;
text-decoration: none
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
<li>
<a href="">1</a>
<ul class="menuUl">
<li><a href="" >1</a></li>
<li><a href="" >2</a></li>
<li><a href="" >3</a></li>
<li><a href="" >4</a></li>
</ul>
</li>
</ul>
</body>
</html>
