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 下拉菜单案例的更多相关文章

  1. z-tree官方提供的下拉菜单案例

    1.z-tree官方提供的下拉菜单案例 <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - selec ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  4. (二)js下拉菜单

    默认的select标签比较难看,UI比较漂亮,如果想要实现UI上的下拉样式,好像必须用js写select,从网上拷贝而且修改了一个下拉框,为了方便以后引用所以记录下来. /* diy_select * ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. js下拉菜单默认值为当前年份,下拉菜单的选项为当前年份往前推5年

    1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...

  7. 原生js下拉菜单

    var oDiv = document.getElementById("sunav"); var oLi = oDiv.getElementsByClassName("s ...

  8. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

  9. jQuery---下拉菜单案例

    下拉菜单案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

随机推荐

  1. Flask 基础组件(十):中间件

    from flask import Flask, flash, redirect, render_template, request app = Flask(__name__) app.secret_ ...

  2. python之class面向对象(进阶篇)

    上一篇<Python 面向对象(初级篇)>文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...

  3. Ethical Hacking - GAINING ACCESS(23)

    CLIENT SIDE ATTACK - BeEF Framework Hooking targets using MITMF Tools: MITMF and BeEF Start BeEF and ...

  4. OSCP Learning Notes - Post Exploitation(3)

    Post-Exploit Password Attacks 1. Crack using the tool - john (Too slow in real world) Locate the roc ...

  5. Qt-可视化数据库操作

    1  简介 参考视频:https://www.bilibili.com/video/BV1XW411x7NU?p=89 说明:Qt可使用QSqlTableModel来进行数据库的可视化操作,将mode ...

  6. Asp.Net Core 附加进程调试

    第一种:VS调试 vs打开项目,F5启动调试 第二种:附加到w3wp.exe进程调试 一.安装NET Core Windows Server Hosting软件包 安装 .NET Core 托管捆绑包 ...

  7. #python自动化测试#代码执行时间测量模块timeit

    1. timeit模块timeit模块可以用来测试一小段python代码的执行速度 class timeit.Timer(stmt = 'pass',setup = 'pass',timer=< ...

  8. Presto 函数开发

    0. 写在前面 Presto Functions 并不能像 Hive UDF 一样动态加载,需要根据 Function 的类型,实现 Presto 内部定义的不同接口,在 Presto 服务启动时进行 ...

  9. 性能测试必备知识(6)- 如何查看“CPU 上下文切换”

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html 课前准备,安装 sysbench 下载 sy ...

  10. 水题-------判断Digit Generator

    题目链接:https://vjudge.net/problem/UVA-1583 题意:给出一个数N,判断最小的数x使x+(x各位数字的和)=N 题解:这是一个暴力求解题,不过有技巧,x各位数字的和最 ...