<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script> <style type="text/css">
ul.menu,ul.menu ul{margin: 0;padding: 0;list-style-type: none;font: bold 13px Verdana;width: 180px; border-bottom: 1px solid #ccc;}
ul.menu li{position: relative;}
ul.menu li a{display: block;overflow: auto; color: #fff;text-decoration: none; padding: 6px 6px 6px 10px; border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;}
ul.menu li a:link, ul.menu li a:visited, ul.menu li a:active{background-color: #333;}
ul.menu li a:visited{color: white;}
ul.menu li a:hover{background-color: #000;}
ul.menu li ul{position: absolute;width: 170px;top: 0; display:none;}
* html ul.menu li { float: left; height: 1%; }
* html ul.menu li a { height: 1%; }
</style>
<script type="text/javascript"> $(function(){
$(".menu").each(function() {
$("ul", $(this)).each(function() {
$(this).css("left", $(this).parent().parent().width() + "px");
$(this).parent().bind("mouseover", function() {
$(this).children("ul").stop().show();
}).bind("mouseout", function() {
$(this).children("ul").delay(500).hide(0);
});
});
});});
</script></head>
<body>
<ul class="menu">
<li><a href="#">公司简介</a></li>
<li><a href="#">成功案例</a></li>
<li><a href="#">产品展示 >></a>
<ul>
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3 >></a>
<ul>
<li><a href="#">产品3_1</a></li>
<li><a href="#">产品3_1</a></li>
<li><a href="#">产品3_1</a></li>
</ul>
</li> </ul>
</li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">下载中心 >></a>
<ul>
<li><a href="#">软件下载</a></li>
<li><a href="#">附件中心 >></a>
<ul>
<li><a href="#">下载1</a></li>
<li><a href="#">下载2</a></li>
<li><a href="#">下载3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">联系方式</a></li>
</ul>
</body>
</html>
解决方案 »
- javascript为什么要有事件注册机制，什么时候要使用这种机制？
- 问一个关于javascript验证表单，输入空格可以提交的问题
- 请问这种菜单效果是怎样做的
- 自定义对象 获得对象得个数
- 如何在IE8.0中实现网页设计中点击弹出层后，网页界面变暗淡，并且失效
- 怎么调用嵌套函数？
- EXTJS2.0，项目中增加一个简单需求，新加一个下拉框选中数据后显示在原有的文本域中
- 【cloudgamer学习之】后面是加分号还是不加
- 急！事件触发问题
- 防止表单重复提交的新方法(action拦截法)
- 新浪微博中的这种地址，是什么技术（不是广告）
- javascript 可以弹出类似confirm那样不过有3个选项的弹出框吗
$(".menu").each(function() {
$("ul", $(this)).each(function() {
$(this).css("left", $(this).parent().parent().width() + "px");
$(this).parent().bind("mouseover", function() {
$(this).children("ul").stop().show();
}).bind("mouseout", function() {
$(this).children("ul").hide(0);
});
});
});});
</script>