<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding:0;

        }

        #nav{/*置父容器高度，宽度，背景颜色，容器水平居中*/

            background: #eee;

            width: 600px;

            height: 40px;

            margin: 0 auto;

        }

        #nav ul{/*去掉点点*/

            list-style: none;

        }

        #nav  ul li{/*每一个li左浮动形成横排，高度占满父容器形成文字垂直居中，文字水平居中*/

             float: left;

            line-height: 40px;

            text-align: center;

            position: relative;/*给子ul定位用的*/

        }

        #nav  ul li a{/*去下下划线,变成块状继承父容器高度，左右撑开*/

            text-decoration: none;

            color:#000;

            padding:0 10px;

            display: block;

        }

        #nav  ul li a:hover{

            color: #fff;

            background-color: #666;

        }

        #nav  ul li ul {

            position: absolute;/*相对于父li的位置进行定位*/

            left: 0;

            top:40px;

            display: none;

        }

        #nav  ul li ul li{

            float: none;

            background-color:#eee;

        }

    </style>

    <!--js代码-->

    <script>

    <!--显示-->

    function show(li){

        var sub=li.getElementsByTagName("ul")[0];

        sub.style.display="block";

    }

    <!--隐藏-->

    function hide(li){

        var sub=li.getElementsByTagName("ul")[0];

        sub.style.display="none";

    }

    </script>

</head>

<body>

    <div id="nav">

        <ul>

            <li><a href="#">首页</a></li>

            <!--onmouseover onmouseout-->

            <li onmouseover="show(this)" onmouseout="hide(this)"><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></li>

            <li onmouseover="show(this)" onmouseout=""><a href="#">关于我们</a>

                <ul>

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

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

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

在网上找到的，感觉挺有用，备份一下而已。

js实现下拉框的更多相关文章

  1. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  2. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  5. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  6. JS实现下拉框选中不同的项，对应显示不同的信息

    实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...

  7. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  8. avalon.js 多级下拉框实现

    学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...

  9. js 设置下拉框的默认值

    设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...

  10. js绑定下拉框

    ---恢复内容开始--- 方法一 js-ajax部分 function GetDListOfCt() { $.ajax({ url: "../../Ajax/Boss_Show.ashx?t ...

随机推荐

  1. BulkLoad加载本地文件到HBase表

    BulkLoad加载文件到HBase表 1.功能 将本地数据导入到HBase中 2.原理 BulkLoad会将tsv/csv格式的文件编程hfile文件,然后再进行数据的导入,这样可以避免大量数据导入 ...

  2. [bzoj2752]高速公路 题解(线段树)

    2752: [HAOI2012]高速公路(road) Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 2102  Solved: 887[Submit] ...

  3. （转）Vmware vSphere 5.0系列教程 vSphere网络原理及vSwitch简介 及一个host两个网卡说明

    转:http://andygao.blog.51cto.com/323260/817518/ 在一个物理网络拓扑中,通常都是路由器-交换机-PC机的连接,不同的服务器和PC机,通过交换机的连接而相互连 ...

  4. C++语言编程基础

    C++程序设计语言可以看作C语言的改进和升级,不仅完全兼容了C语言的语法和函数库,还引入了面向对象.运算符重载.多态性.数据流和模板等最新的编程思想.极大地保证了源代码的生产率.质量和可重用性.GNU ...

  5. ASP.NET Core学习——前言

    跌跌撞撞,公司的新项目终于要在这个月月底上线. 新项目使用ASP.NET Core来做,以前没接触过这方面的内容,只能一边学习,一边搞开发. 眼看项目上线在即,工作没那么忙,也不需要天天加班. 回想了 ...

  6. 杂项-PPT：如何把幻灯片ppt转换成视频

    ylbtech-杂项-PPT:如何把幻灯片ppt转换成视频 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://jingyan.baidu.co ...

  7. unzip失败，unzip：报错End-of-central-directory signature not found、scp：报错no space left on device

    文章目录 问题 解决 拓展 问题 通过rz命令传本地文件到本地服务器,失败. 通过scp命令尝试报错: no space left on device 意思是目的机器内存不够用了,但是传过去了,但是没 ...

  8. setjmp与longjmp的分析

    #include <setjmp.h> int main(int argc, const char* argv[]) {   jmp_buf buf = {0,}; int k = 0; ...

  9. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  10. 关于py中lxml模块的cssselect的小问题

    今天在使用lxml进行解析页面的时候遇到了不能解析空格的问题,就是类似于: <div class="aa bb"></div> 使用cssselect('. ...