CSS+HTML+JQuery简单菜单

1. [代码]style

<style type="text/css">
body,ul,li,a{
margin:0;
padding:0
}

ul,li{
list-style-type:none
}

.menu{
270px;
height:30px;
line-height:30px;
background:#0f67a1
}

.menu li{
80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}

.menu li:hover{
background:#426d9c;
}

.menu .menuUl{
50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}

.menuUl li{
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{
270px;
height:30px;
line-height:30px;
background:#0f67a1
}

.menu li{
80px;
float:left;
display:inline;
position:relative;
z-index:10;
text-align:center/*一级栏内容居中*/
}

.menu li:hover{
background:#426d9c;
}

.menu .menuUl{
50px;
height:auto;
display:none;
background:#426d9c;
position:absolute;
z-index:20;
left:25px;
top:30px
}

.menuUl li{
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>

相关阅读:
jQuery 入门 -- 事件事件绑定与事件委托
原生js实现视差风格音乐播放器
jQuery 入门
一些开放的免费接口【已失效】
php mysqli操作数据库
DOM 相关
面向对象
对象
博客园添加鼠标点击特效
正则表达式

原文地址：https://www.cnblogs.com/xkzy/p/3951674.html