<!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{ line-height:40px; text-align:center; position:relative; float:left;}
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none;margin-top:2px; background-color:#eee; } 
 ul li ul{width:90px; position:absolute;  left: 0px;top: 40px; display: none;}
/** ?*/
/**ul li:hover ul{display: block}*/
</style>

<script  src="/home/rocky/develop/jquery/jquery-1.7.2.js" ></script>
    
<script type="text/javascript">
    $(function(){
        alert("123");
        $(".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="#">JavScript</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>

javaScript基础练习题-下拉框制作(JQuery)的更多相关文章

  1. javaScript基础练习题-下拉框制作

    1.基础回顾 如何让一个段javascript在文档加载后执行,(因为自己忘了,所以顺便复习一下) window.onload = function(){}; <!DOCTYPE html PU ...

  2. javaScript基础练习题-下拉框制作(CSS)

    http://www.imooc.com/video/155 慕课网的视频,直接上代码 <!DOCTYPE hmtl> <html> <head> <meta ...

  3. javaScript基础练习题-下拉框制作(神奇的代码)

    http://www.oschina.net/code/snippet_12_46548#66319 http://www.codeproject.com/Tips/890021/Advanced-C ...

  4. JavaScript向select下拉框中加入和删除元素

    JavaScript向select下拉框中加入和删除元素 1.说明 a   利用append()方法向下拉框中加入元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源代码 < ...

  5. JavaScript向select下拉框中添加和删除元素

    JavaScript向select下拉框中添加和删除元素 1.说明 a   利用append()方法向下拉框中添加元素 b   利用remove()方法移除下拉框中最后一个元素 2.设计源码 < ...

  6. JavaScript解决select下拉框中的内容太长显示不全的问题

    JavaScript解决select下拉框中的内容太长显示不全的问题 1.说明 有些情况下,select下拉框的内容过长,导致部分看不见: 现在通过鼠标事件,让下拉框中的内容显示完全 2.实现源码 & ...

  7. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  8. Javascript获取select下拉框选中的的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name=" ...

  9. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

随机推荐

  1. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  2. Windows安装 ANT

    apache-ant-1.7.1-bin.zip 下载地址:http://ant.apache.org/bindownload.cgi 第一步      解压apache-ant-1.7.1-bin. ...

  3. java 21 - 9 复制图片的4种方式

    需求:复制图片 分析: 因为图片我们用记事本打开后无法读懂,所以用字节流 并且字节流复制有4种方式,所以我们尝试4种方式. 推荐第四种:缓冲字节流一次读取一个字节数组 首先写main方法: publi ...

  4. 四、Protocol 类似java的接口

    概念:是一系列方法的列表,其中声明的方法可以被任意类实现.这种模式称为代理.和JAVA接口不同的是,Protocol可以不用被实现所有的方法. 使用场景:想要监听一些按钮的操作 1声明一个协议 //& ...

  5. GridControl控件绑定RepositoryItemImageComboBox 作为下拉框使用

    如果,时间长时了,已前做过的东西,都记不得了,所以记录一下. 废话不多说. 1.拖出gridview控件,然后将字段绑定上去 2.将要做下拉框的控件加入RepositoryItemImageCombo ...

  6. treepanel加滚动条

  7. 【转】MySQL 性能优化的最佳20多条经验分享

    今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要担心的事,而这更是我们程序员需要去关注的事情.   当我们去设计数据库表结构,对操 ...

  8. eclipse使用

    Eclipse 是一个开放源代码的.基于 Java 的可扩展开发平台. Eclipse 是 Java 的集成开发环境(IDE),当然 Eclipse 也可以作为其他开发语言的集成开发环境,如C,C++ ...

  9. oracle中if/else功能的实现的3种写法

    1.标准sql规范 一.单个IF 1. if a=... then ......... end if; 2. if a=... then ...... else .... end if; 二.多个IF ...

  10. Jquery 将表单序列化为Json对象

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法.不过,我们可以写一个插件实现. 我在网上看到有人用替换的方法,先用 ...