一个不错的下来菜单

转载 2012年03月23日 14:57:03
<!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>jQuery下拉菜单</title>
<script type='text/javascript' src='/ajaxjs/jquery1.3.2.js'></script>
<style type="text/css">
ul{ margin:0; padding:0;}
ul li{ list-style:none}
#div{ width:960px; height:28px;}
#div ul li{ float:left; height:28px; display:inline; line-height:28px; padding:0px 20px; position:relative;}
#div ul li ul{ position:absolute; z-index:99; display:none; top:28px; width:140px; left:0px;}
#div ul li ul li{ display:block; width:140px; height:26px; line-height:26px; background-color:#666; border-bottom:1px #FFFFFF solid;}
#div ul li a{ color:#000000; text-decoration:none;}
</style>
<script type="text/javascript">
  $(function(){
  $("#div ul li").hover(function(){
    $(this).css("background","#333333").children("ul").slideDown();
  },function(){
    $(this).css("background","#fff").children("ul").slideUp();
  })
  $("#div ul li ul li").hover(function(){
     $(this).css("background","#333");
	 },function(){
	 $(this).css("background","#666");
	 })
  })
</script>
</head>
<body>
<div id="div">
 <ul>
   <li><a href="#">首页</a></li>
   <li><a href="#">企业资源</a>
     <ul>
	   <li>企业资源</li>
	   <li>企业资源</li>
	 </ul>
   </li>
   <li><a href="#">新闻中心</a>
         <ul>
	   <li>新闻中心</li>
	   <li>新闻中心</li>
	   <li>新闻中心</li>
	 </ul>
   </li>
   <li><a href="#">工程业绩</a>
         <ul>
	   <li>工程业绩</li>
	   <li>工程业绩</li>
	   <li>工程业绩</li>
	 </ul>
   </li>
   <li><a href="#">仪器设备</a>
            <ul>
	   <li>仪器设备</li>
	   <li>仪器设备</li>
	 </ul>
   </li>
   <li><a href="#">企业文化</a>
             <ul>
	   <li>企业文化</li>
	   <li>企业文化</li>
	 </ul>
   </li>
   <li><a href="#">联系我们</a>
             <ul>
	   <li>联系我们</li>
	   <li>联系我们</li>
	   <li>联系我们</li>
	 </ul>
   </li>
 </ul>
</div>
</div>
</body>
</html>

相关文章推荐

做一个程序员需要哪些基本知识----网上看到的,觉得不错,就复制下来了

程序员是一种技术工作,在IT的发展中有相当重要的地位,从底层硬件通讯协议的建立, 到数据传输层的处理,到操作系统的建设,到数据库平台的建设,一直到应用层上各种数 据营销平台的搭建,程序员在里面都扮演着...

转一个不错的jQuery右键菜单

一个不错的jQuery右键菜单,转自OsChina,效果图如下 下面是jquery右键菜单的代码 (function (menu) { jQuery.fn.contextmenu ...

看了下分析的不错,就记了下来

ARM中C和汇编混合编程及示例     在嵌入式系统开发中,目前使用的主要编程语言是C和汇编,C++已经有相应的编译器,但是现在使用还是比较少的。在稍大规模的嵌入式软件中,例如含有OS,大...

多媒体北京奥运吉祥物 下来菜单

  • 2011年05月20日 20:30
  • 6.36MB
  • 下载

漂亮的css下来菜单

  • 2014年05月15日 16:44
  • 316KB
  • 下载

Eclipse 插件开发 - 工具栏(tool bar)增加下来菜单

在开发Eclipse 插件时, 想在工具栏中增加一个按钮图标是非常容易, 但是想在图标上增加子菜单就会比较麻烦, 例如想实现如下效果:  具体步骤如下: 首先在扩展点org.ecl...
  • piaohai
  • piaohai
  • 2015年12月20日 16:55
  • 2415

下来菜单只用css

  • 2014年03月20日 17:51
  • 3KB
  • 下载

利用简单的自由布局实现实现下来列表式菜单

利用了一点点自由布局可以很方便的自由添加多个菜单项,代码如下: import java.awt.BorderLayout; import java.awt.Color; import java.awt...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个不错的下来菜单
举报原因:
原因补充:

(最多只允许输入30个字)