<!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. 关于performSelector调用和直接调用区别

    下面两段代码都在主线程中运行,我们在看别人代码时会发现有时会直接调用,有时会利用performSelector调用,今天看到有人在问这个问题,我便做一下总结, [delegate imageDownl ...

  2. C++——编译器运行过程

    C++ 编译过程简介   C/C++程序编译流程: 预处理->编译->汇编->链接 具体的就是: 源代码(source coprede)→预处理器(processor)→编译器(co ...

  3. 如何上传代码至GitHub

    环境准备: git GitHub账号 步骤: 1.登录github创建一个新的项目  参数说明: Repository name: 仓库名称 Description(可选): 仓库描述介绍 Publi ...

  4. 与DSP通信时,RD&WR信号

      /////////////////////////////////////////////////////////// :] rd,wr; :] dsp_data_out; 'hzzzz; // ...

  5. error C4996: 'getcwd': The POSIX name for this item is deprecated. Instead, use the ISO C++ conformant name: _getcwd. See online help for details. c:\users\12968\desktop\testapp\testapp\testapp.c

    解决办法: 属性>C/C++>预处理器定义>分别输入: _CRT_SECURE_NO_WARNINGS _CRT_SECURE_NO_DEPRECATE >保存退出即可

  6. Redis数据结构之字典-dict

    dict是Redis服务器中出现最为频繁的复合型数据结构,除hash使用dict之外,整个Redis数据库中所有的key和value也会组成一个全局字典,还有带过期时间的key集合也是一个字典. zs ...

  7. 内网渗透_linux_socks代理_reGeorg+proxychains

    过程演示 测试前提是目标服务器已经getshell. 1.将 reGeorgSocksProxy 中的 tunnel.jsp 文件放置到目标服务器web目录,查看能否正常访问(如图). 2.设置kal ...

  8. css 折角效果/切角效果

    首先我们先创建一个图案为100像素的斜面切角的图案 html <div class="one">12345</div> css .one{ width: 1 ...

  9. kubeadm生成的token重新获取

    当你的token忘了或者过期,解决办法如下: 1.先获取token #如果过期可先执行此命令kubeadm token create #重新生成token#列出tokenkubeadm token l ...

  10. 修改docker镜像地址

    vim /etc/docker/daemon.json,使用国内加速站点镜像 https://registry.docker-cn.com http://hub-mirror.c.163.com ht ...