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. Java虚拟机详解02----JVM内存结构

    主要内容如下: JVM启动流程 JVM基本结构 内存模型 编译和解释运行的概念 一.JVM启动流程: JVM启动时,是由java命令/javaw命令来启动的. 二.JVM基本结构: JVM基本结构图: ...

  2. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  3. 会报编译器警告的Xcode 6.3新特性：Nullability Annotations

    最近在用Xcode 6.3写代码,一些涉及到对象的代码会报如下编译器警告: 1 Pointer is missing a nullability type specifier (__nonnull o ...

  4. sqlSQL2008如何创建定时作业（代理服务）（转）

    SQL2008如何创建定时作业?此方法也适应于Sql Server2005数据库,有兴趣的可以来看下! 1.打开[SQL Server Management Studio],在[对象资源管理器]列表中 ...

  5. 20145208 实验四 Android开发基础

    20145208 实验四 Android开发基础 安装Android Studio 安装的具体步骤在老师的链接中已经很详细了,在此就不做赘述了. 在此提出我觉得安装的时候需要注意的两个地方 一是安装地 ...

  6. DLL中调用约定和名称修饰（一）

    DLL中调用约定和名称修饰(一) 调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用而建立的一种协议.这种协议规定了该语言的函数中的参数传送方式.参数是否可变和由谁来 ...

  7. MATLAB代码加密生成.p文件

    代码就下面一句话: pcode yourfile.m 生成的 yourfile.p就是你的加密文件,别人是看不到代码的,调用和m文件调用一样.

  8. IT男的”幸福”生活"续7

    哇,兄弟们的热情真牛X的高呀!!! 在这里谢谢大家了.同时祝大家元宵节快乐,幸福美好.呵呵. 续7准备开始了… ….. 是什么样的事困扰她了… 躺在床上我,一直回想着MM,今天的情绪状态. 分析一下: ...

  9. ASP.NET 系列：RBAC权限设计

    权限系统的组成通常包括RBAC模型.权限验证.权限管理以及界面访问控制.现有的一些权限系统分析通常存在以下问题: (1)没有权限的设计思路 认为所有系统都可以使用一套基于Table设计的权限系统.事实 ...

  10. $self $index $first $last parent() outerParent()

    index5.html <html><head> <title>$self $index $first $last parent() outerParent()&l ...