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. 在Unity中为模型使用表情

    在游戏中让角色能够拥有表情,是我一直很想实现的一件事情,今天搜索了一下这方面的资料,找到两个解决方案. MMD For Unity GitHub:https://github.com/mmd-for- ...

  2. 最常用的DOS命令

    ping:利用它可以检查网络是否能够连通,用好它可以很好地帮助我们分析判定网络故障,如ping 127.0.0.1tracert:跟踪路由,查询到相应网站的服务器之间所需经过的路由器个数,如trace ...

  3. 【mybatis】1、入门CURD基本操作（环境搭建）

    #1.基本环境 环境 版本 jdk 1.7.0_10 ide eclipse-jee-luna-SR2-win32-x86_64 maven 3.3.3 mybatis 3.2.7 mysql 5.1 ...

  4. Apache Shiro 开源权限框架

    在 Web 项目中应用 Apache Shiro 开源权限框架 Apache Shiro 是功能强大并且容易集成的开源权限框架,它能够完成认证.授权.加密.会话管理等功能.认证和授权为权限控制的核心, ...

  5. View （四）视图状态及重绘流程分析

    相 信大家在平时使用View的时候都会发现它是有状态的,比如说有一个按钮,普通状态下是一种效果,但是当手指按下的时候就会变成另外一种效果,这样才会给 人产生一种点击了按钮的感觉.当然了,这种效果相信几 ...

  6. WebApi 返回小驼峰式 json 格式，并格式化日期

    from:http://blog.csdn.net/magiccops/article/details/42969363 屏蔽默认返回xml格式:Global文件加:GlobalConfigurati ...

  7. javascript中的浅复制和深复制

    //浅复制:实现基本类型的复制没有问题,但是复制的是引用类型的话,则修改child将会修改parent function extend(parent,child){ var child = child ...

  8. action中result没有值

    action中result没有值,访问action会输出action中的所有数据,输出类型为.action类型 .

  9. 【Windows phone 8】欢迎引导页面02

    [目标]前一篇文章已经实现了图片的切换,这里需要限制pivot的循环滚动. [思路]通过手势事件,对第一张,最后一张图片处加以限制 [前台] 在pivot处加上 <toolkit:Gesture ...

  10. CLR Profiler

    检查c#代码内存泄露工具-CLR Profiler 大家都知道.net有一套自己的内存(垃圾)回收机制,除非有一些数据(方法)长期占有内存不随着垃圾回收功能而释放内存,这样就造成了我们经常说的内存泄露 ...