JS 下拉菜单案例
css代码
.nav {
width: 300px;
height: 400px;
list-style: none;
padding:;
margin: 0 auto;
} .nav>li {
float: left;
width: 100px;
text-align: center;
}
.nav>li a {
display: block;
line-height: 50px;
color: rgb(141, 138, 138);
text-decoration: none;
position: relative;
} .nav li ul {
display: none;
list-style: none;
padding:;
position: absolute;
top: 50px;
width: 100px;
}
.nav li ul li {
line-height: 40px;
text-align: center;
cursor: pointer;
}
.nav li ul li:hover {
background-color: blanchedalmond;
}
HTML代码
<ul class="nav">
<li>
<a href="#">微博1</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</li>
<li>
<a href="#">微博2</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</li>
<li>
<a href="#">微博3</a>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</li>
</ul>
JS代码
var nav = document.querySelector(".nav")
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = 'block'
}
lis[i].onmouseout = function () {
this.children[1].style.display = 'none'
}
}
效果图
JS 下拉菜单案例的更多相关文章
- z-tree官方提供的下拉菜单案例
1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- JS 下拉菜单
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- (二)js下拉菜单
默认的select标签比较难看,UI比较漂亮,如果想要实现UI上的下拉样式,好像必须用js写select,从网上拷贝而且修改了一个下拉框,为了方便以后引用所以记录下来. /* diy_select * ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年
1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...
- 原生js下拉菜单
var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
- jQuery---下拉菜单案例
下拉菜单案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
随机推荐
- Flask 基础组件(十):中间件
from flask import Flask, flash, redirect, render_template, request app = Flask(__name__) app.secret_ ...
- python之class面向对象(进阶篇)
上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...
- Ethical Hacking - GAINING ACCESS(23)
CLIENT SIDE ATTACK - BeEF Framework Hooking targets using MITMF Tools: MITMF and BeEF Start BeEF and ...
- OSCP Learning Notes - Post Exploitation(3)
Post-Exploit Password Attacks 1. Crack using the tool - john (Too slow in real world) Locate the roc ...
- Qt-可视化数据库操作
1 简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=89 说明:Qt可使用QSqlTableModel来进行数据库的可视化操作,将mode ...
- Asp.Net Core 附加进程调试
第一种:VS调试 vs打开项目,F5启动调试 第二种:附加到w3wp.exe进程调试 一.安装NET Core Windows Server Hosting软件包 安装 .NET Core 托管捆绑包 ...
- #python自动化测试#代码执行时间测量模块timeit
1. timeit模块timeit模块可以用来测试一小段python代码的执行速度 class timeit.Timer(stmt = 'pass',setup = 'pass',timer=< ...
- Presto 函数开发
0. 写在前面 Presto Functions 并不能像 Hive UDF 一样动态加载,需要根据 Function 的类型,实现 Presto 内部定义的不同接口,在 Presto 服务启动时进行 ...
- 性能测试必备知识(6)- 如何查看“CPU 上下文切换”
做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 课前准备,安装 sysbench 下载 sy ...
- 水题-------判断Digit Generator
题目链接:https://vjudge.net/problem/UVA-1583 题意:给出一个数N,判断最小的数x使x+(x各位数字的和)=N 题解:这是一个暴力求解题,不过有技巧,x各位数字的和最 ...