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. IL查看委托

    查看委托的IL 通过IL来查看委托的原理, 委托示例代码 写一个委托的类如下 using System;   namespace MyCollection { //定义一个类,该类包含两个静态方法 c ...

  2. mysql order by 出现Using filesort的解决办法

    http://blog.csdn.net/yangyu112654374/article/details/4251624 比如一条sql语句 select * from TABLE1 where A1 ...

  3. Linux命令学习－sed

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...

  4. POJ 1002 487-3279

    A - 487-3279 Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit ...

  5. 3110 PHP常见问题

    1.中文显示 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&g ...

  6. matlab绘制三维图形

    原文地址:种三维曲面图. 程序如下: [x,y]=meshgrid(-8:0.5:8); z=sin(sqrt(x.^2+y.^2))./sqrt(x.^2+y.^2+eps); subplot(2, ...

  7. [CareerCup] 14.3 Final Finally Finalize 关键字比较

    14.3 What is the difference between final, finally, and finalize? 这道题考察我们Java中的三个看起来很相似的关键字final,fin ...

  8. Fork一个仓库

    Fork 是对一个仓库的克隆.克隆一个仓库允许你自由试验各种改变,而不影响原始的项目. 一般来说,forks 被用于去更改别人的项目(贡献代码给已经开源的项目)或者使用别人的项目作为你自己想法的初始开 ...

  9. iOS中偏好设置的创建，数据写入与读取

    NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...

  10. Opencv step by step - 配置文件

    有时候,我们需要用配置文件存储一些图像或者视频的信息. 先来一个简单的例子: #include <cv.h> #include <highgui.h> int main(int ...