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. 第22章 DLL注入和API拦截（3）

    22.6 API拦截的一个例子 22.6.1 通过覆盖代码来拦截API (1)实现过程 ①在内存中对要拦截的函数(假设是Kernel32.dll中的ExitProcess)进行定位,从而得到它的内存地 ...

  2. AC日记——传话 codevs 1506 （tarjan求环）

    1506 传话  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解       题目描述 Description 一个朋友网络,如果a认识b,那么如果a第 ...

  3. 使用Unity3D的50个技巧：Unity3D最佳实践

    翻译故事 原文:http://devmag.org.za/2012/07/12/50-tips-for-working-with-unity-best-practices/ 这篇技巧,我自己也在翻译, ...

  4. Java Executor并发框架（三）ThreadPoolExecutor 队列缓存策略

    前面两篇讲解了线程池中线程创建后的运行情况,其中有一系列的策略来保证线程正常运行.但是我们知道线程池是可以设置容量的,而且这容量的设置也是至关重要的,如果容量设置的太小,那么将会影响系统的运行效率,如 ...

  5. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  6. Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  7. Linux 信号概念

    程序在执行的时候,几乎任何时刻都会反生事件. 信号通常用来向一个进程通知事件. 信号是不可提前预知的,所以信号是异步的. 信号随时都可能发生,接收信号的进程也可以没有控制权. 每个信号名都以SIG开头 ...

  8. Discuz! X的CSS加载机制

    首先,每个页面都会加载以下两个css,data/cache/style_1_common.css和data/cache/style_1_forum_index.css.先讲讲这两个文件名的命名规则:第 ...

  9. 网络请求怎么样和UI线程交互？ Activity2怎么通知Activity1 更新数据

    1.网络请求怎么样和UI线程交互? 目前我的做法是,建立线程池管理网络请求线程,通过添加task来新增网络请求.所有的网络操作通过统一的request来实现,网络返回结果通过回调onError和onS ...

  10. JDK报错Unsupported major.minor version 52.0

    一.问题描述: 新建web项目,由于我配置的Tomcat 6依赖jdk 1.8,所以新建的工程在jdk1.8环境下生成.当我把jdk改成1.6版本时,运行main方法或其他,则 报以下错误: java ...