http://www.imooc.com/video/155

慕课网的视频,直接上代码

<!DOCTYPE hmtl>

<html>

    <head>

        <meta charset="utf-8" />

        <title>

        </title>

        <style type="text/css">

            * {

                margin: 0px;

                padding:0px;

            }

            #nav{

                background-color: #eee;

                width: 600px;

                height: 40px;

                margin: 0 auto;

                text-align:center;

                }

            ul{list-style:none }

            ul li{float: left; line-height:40px; text-align: center;position: relative;}

            a {

                text-decoration: none;

                display:block;

                padding: 0 10px;

            }

            a:hover{

                color: #fff;background-color: #666;

            }

            /*这句的意思是当鼠标滑到ul li 上方时当前的ul li ul显示 */

            ul li:hover ul{

                display: block;

            }

            ul li ul li {

                float: none;background-color: #eee;margin-top: 2px;

            }

            ul li ul {

                /*绝对定位必须何left,top等组合使用,top:40px,是因为其父亲li的lineheight是40px;*/

                position: absolute;left: 0px;top:40px;display: none;

            }

        </style>

    </hean>

    <body>

        <div id="nav">

            <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></li>

                <li><a href="#">经典案例</a>

                    <ul>

                        <li><a href="#">BBS</a></li>

                        <li><a href="#">newsSystemnewsSystem</a></li>

                    </ul>

                </li>

                <li><a href="#">关于我们</a></li>

            </ul>

        </div>

    </body>

</html>

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

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

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

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  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. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

随机推荐

  1. 第11章 Windows线程池（3）_私有的线程池

    11.3 私有的线程池 11.3.1 创建和销毁私有的线程池 (1)进程默认线程池 当调用CreateThreadpoolwork.CreateThreadpoolTimer.CreateThread ...

  2. Spring AOP 针对注解的AOP

    我也忘记是从哪里扒来的代码,不过有了这个思路,以后可以自己针对 Controller 还有 Service层的任意 方法进行代理了 package pw.jonwinters.aop; import ...

  3. C++函数内存占用

    一个类的对象中是没有关于普通成员函数的指针的slot,只有成员变量还有虚表指针,类的成员函数的代码定义在PE文件的代码区,所以从程序加载时,就已经分配好了内存用于存放这些代码:代码运行时所需要的内存, ...

  4. Android开发探秘之三：利用jsoup解析HTML页面

    这节主要是讲解jsoup解析HTML页面.由于在android开发过程中,不可避免的涉及到web页面的抓取,解析,展示等等,所以,在这里我主要展示下利用jsoup jar包来抓取cnbeta.com网 ...

  5. Python之socket（套接字）

    Socket 一.概述 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...

  6. c# 技巧之 泛型方法

    泛型 指的是编译时不需要指定具体的参数类型,可以在运行时动态地赋予某一种数据类型的机制.  相信很多人对泛型类并不陌生,像Dictionary,List等结构都属于泛型类.有趣的是,一个函数/方法也可 ...

  7. valueOf和toString

    有一道经典的题目: var add = function() {___}; console.log(add(3)(4)(5)); // 输出60 题目要求能无限相乘,请补充add函数. 首先很显然,a ...

  8. HoloLens开发手记 - Unity之摄像头篇

    当你穿戴好HoloLens后,你就会处在全息应用世界的中心.当你的项目开启了"Virtual Reality Support"选项并选中了"Windows Hologra ...

  9. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  10. FTP+SFTP工具类封装-springmore让开发更简单

    github地址:https://github.com/tangyanbo/springmore FTPUtil 该工具基于org.apache.commons.net.ftp.FTPClient进行 ...