分别用html+css,js,jquery实现二级下拉列表

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
 ul li ul{   display:none; width:90px; position:absolute;}
 ul li:hover ul{ display:block;}

</style>
</head>

<body>
<div id="menu">
   <ul>

  <li><a href="#">首页</a></li>
  <li><a href="#">课程大厅</a>
      <ul>

   <li><a href="#">JavaScript</a></li>
  <li><a href="#">jQuery</a></li>

      </ul>

  </li>
  <li><a href="#">学习中心</a>
    <ul>
    <li><a href="#">视频学习</a></li>
      <li><a href="#">案例学习</a></li>
      <li><a href="#">交流平台</a></li>
      </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>

</ul>

</div>
          </body>
</html>

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}

ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}

</style>

 <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>
</head>

<body>
<div id="nav">
<ul>
  <li><a href="#">首页</a></li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
     <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">Html/CSS</a></li>
     </ul>
  </li>
  <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">实例练习</a></li>
         <li><a href="#">问与答</a></li>
     </ul>  

  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>

</ul>

</div>
</body>
</html>

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
 ul li ul{  width:90px; position:absolute; left:0px; top:40px; display:none;}

</style>
<script src="jquery/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
  $(function(){
     $(".navmenu").mouseover(function(){
         $(this).children("ul").show();

         })
     $(".navmenu").mouseout(function(){

         $(this).children("ul").hide();

         })

      })

</script>

</head>

<body>
<div id="menu">
   <ul>

  <li><a href="#">首页</a></li>
  <li class="navmenu"><a href="#">课程大厅</a>
      <ul>
         <li><a href="#">JavaScript</a></li>
         <li><a href="#">jQuery</a></li>
      </ul>

  </li>
  <li class="navmenu"><a href="#">学习中心</a>
      <ul>
         <li><a href="#">视频学习</a></li>
         <li><a href="#">案例学习</a></li>
         <li><a href="#">交流平台</a></li>
      </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>

</ul>

</div>
          </body>
</html>

时间： 2024-11-03 22:43:19

分别用html+css,js,jquery实现二级下拉列表的相关文章

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

一个基于html,css,js,JQuery的登录界面

github地址:https://github.com/BgirlStar/myTest_final 任务需求: 可进行部分改变,但颜色和风格要保持不变. 完成点:1.login按钮的隐藏与弹出 2.弹出框样式(三角,阴影,圆角) 3.输入框图片和默认字符 4.背景按钮渐变 5.js内置用户名密码,点击登录后弹出对话框完成后图片: 加入jquery插件实现了弹出框的隐藏与弹出,代码见js/index.js js/jquery.js 内置email和密码代码见js/need.js 素材包见j

了解HTML/CSS/JS/JQuery/ajax等前端知识

什么是HTML 超文本标记语言浏览器通过识别相应的标签来加载页面通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body body标签 h1-h6 p br hr strong p b div img a table tr td 列表标签 ul ol li 表单标签 input redio checkbox text submit button resit password fiel hidden select 什么是

HTML CSS JS JQuery 特性属性详解

HTML 文字滚动标签 <marquee><font size=+3 color=red>Hello, World</font></marquee> CSS 溢出的内容用(...)代替 text-overflow: ellipsis; 强制不允许换行 white-space: nowrap;

区域及分离、Js压缩、css、jquery扩展

后台管理区域及分离.Js压缩.css.jquery扩展本系列目录:ASP.NET MVC4入门到精通系列目录汇总有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱佛脚.深圳最近的天气反常,许多人感冒了,我也成为其中之一,大家注意身体... 这一篇,我来简单的讲一下接下来项目中会用到的一些杂七杂八的技术. 区域及分离在15.ASP.NET MVC入门到精通——MVC-路由中,我已经简要说明了区域的分离.

动态加载js和css的jquery plugin

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. Java代码 //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files

CSS+JS感应鼠标展开的的二级下拉菜单

<!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>CSS+JS感应鼠标展开的的二级下拉菜单丨

【css】jquery.pngFix.js解决透明问题

/** * -------------------------------------------------------------------- * jQuery-Plugin "pngFix" * Version: 1.2, 09.03.2009 * by Andreas Eberhard, [email protected] * http://jquery.andreaseberhard.de/ * * Copyright (c) 2007 Andreas Eberhard *

js活jQuery实现动态添加、移除css/js文件

下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下动态加载,移除,替换css/js文件 // 动态添加css文件 function addCss(filename){ var creatHead = $('head'); creatHead.append('<link rel="stylesheet" href="'+filename+'">') } // 移除css/js文件 functi