js实现下拉框
<!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实现下拉框的更多相关文章
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- JS 实现下拉框去重
JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...
- JS 实现下拉框回显
JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...
- JS实现下拉框选中不同的项，对应显示不同的信息
实现的效果如下图: 页面代码 下拉框: <select id="select3" name="select3" onchange="showli ...
- 快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...
- avalon.js 多级下拉框实现
学习avalon.js的时候,有一个多级下拉框的例子,地址 戳这里 代码实现了联动, 但是逻辑上面理解有点难度,获取选择的值 和 页面初始化 功能存在问题. 在写地图编辑的时候,也用到了多级下拉框,特 ...
- js 设置下拉框的默认值
设置下拉框的默认值,直接在option中增加selected就可以了.但是现在要使用JS来设置它的默认值,代码如下: <select name="aaa" id=" ...
- js绑定下拉框
---恢复内容开始--- 方法一 js-ajax部分 function GetDListOfCt() { $.ajax({ url: "../../Ajax/Boss_Show.ashx?t ...
随机推荐
- centos7下命令行配置nginx
本教程中的步骤要求用户拥有root权限 第一步 - 添加Nginx存储库要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令: sudo yum install epel-release第二 ...
- LINIX上Nginx的从零安装
源码编译方式: #一般系统中已经装了了make和g++,无须再装 安装make: yum -y install autoconf automake make 安装g++: yum -y install ...
- Java-Class-C：org.springframework.util.Assert
ylbtech-Java-Class-C:org.springframework.util.Assert 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 1. /* * Copyr ...
- 51nod1787最大子方阵
51nod1787最大子方阵 我在51nod上面切的第一道题 我在51nod上面切的第一道8级题 我在51nod上面切的第一道8级题的一血 题目大意 有一个n*m的矩阵,矩阵中的每一个元素是'X'或者 ...
- 20140613 Opencv重新编译 word小技巧
1.OPENCVGPU重新编译+自己的文件 注意点: 1.生成OPENCV.sln解决方案后,在ALL_build的属性中,添加相应目录: ALL_BUILD中的Debug和Release上的Micr ...
- Linux 下通过mail命令发送邮件
mail -s "测试" 1968089885@foxmail.com 需要先配置smtp服务器
- Linux中的网络管理——网络配置及命令
Linux网络配置 在Linux中配置IP地址的方法有以下这么几种: 图形界面配置IP地址(操作方式如Windows系统配置IP,但在实际生产中,我们并不建议在我们的服务器上安装Linux的图形界面, ...
- Linux操作基础
摘要 一.Linux操作系统概述 二.Linux操作系统安装 三.Linux文件系统及文件基础 四.Linux操作系统命令使用基础 五.Linux应用程序的安装与卸载基础 五.用户及进程 六.相关信息 ...
- 装机时键盘选择失误？教你修改kali Linux键盘到美式。
在Linux装机选择键盘的时候,由于学的是英式英语而选择了英式键盘,结果吃了大亏.英式键盘和我们平时使用的美式键盘的键位是不一样的! 这是我们平时使用的美式键盘: 这是英式键盘: 修改的方式是: 点击 ...
- 装箱与拆箱（TDB）
装箱:把值类型转换为引用类型 拆箱:把引用类型转换为值类型 只能对之前装箱的变量进行拆箱.需要强制转换.