javascript实现控制的多级下拉菜单
作者：hebedich 发布时间：2024-07-07 10:41:38
标签：javascript,多级下拉菜单
最近身体不适，所以没能如期的更新，抱歉。这里直接把代码贴上，如果有不明白的地方，留言就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>下拉菜单</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.navi ul {
padding: 0;
list-style-type: none;
}
.navi ul li {
text-align: center;
float: left;
position: relative;
width: 200px;
background-color: #0F8CFF;
}
a {
color: #086808;
text-decoration: none;
}
.navi ul li a {
display: block;
border: 1px solid #fff;
}
.navi ul li ul {
display: none;
left: 0;
}
.navi ul li ul li ul{
position: absolute;
left:200px;
top: 0;
}
.navi ul li:hover ul a {
color: yellow;
}
</style>
<script type="text/javascript">
function showNextMenu(obj){
var nextMenu = obj.getElementsByTagName("ul")[0];
nextMenu.style.display = "block";
}
function hideNextMenu(obj){
var nextMenu = obj.getElementsByTagName("ul")[0];
nextMenu.style.display = "none";
}
</script>
</head>
<body>
<div class="navi">
<ul >
<li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
<a href="javascript:;" >游戏</a>
<ul>
<li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
<a href="javascript:;" >传奇</a>
<ul>
<li>
<a href="javascript:;" >1</a>
</li>
<li>
<a href="javascript:;" >2</a>
</li>
<li>
<a href="javascript:;" >3</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" >传奇</a>
</li>
<li>
<a href="javascript:;" >传奇</a>
</li>
<li>
<a href="javascript:;" >传奇</a>
</li>
<li>
<a href="javascript:;" >传奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戏</a>
<ul>
<li>
<a href="javascript:;" >传奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戏</a>
<ul>
<li>
<a href="javascript:;" >传奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戏</a>
<ul>
<li>
<a href="javascript:;" >传奇</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果图如下：
以上所述就是本文的全部内容了，希望大家能够喜欢。
0
投稿猜你喜欢
- 如果遇到与文件许可有关的问题，可能数启动mysqld时UMASK环境变量设置得不正确。例如，当你创建表时，MySQL可能会发出下述错误消息：
前言：看本教程，必须先仔细看前言的内容,否则会进入误区！最近在做个性休闲服装内网站的设计课程，过程中发现，个性元素的应用成为最难的问题，第一- 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣，现在我们一起来深入了解这一实用功能。 用FrontPage200
- gzip文件读写的时候需要用到Python的gzip模块。具体使用如下：# -*- coding: utf-8 -*-import gzip
- 在本教程中，我们将构建一个程序，该程序可以使用流行的计算机视觉库 OpenCV 确定对象的方向（即以度为单位的旋转角度）。最常见的现实世界用
- 首先，eval模式和train模式得到不同的结果是正常的。我的模型中，eval模式和train模式不同之处在于Batch Normaliza
- 代码如下:<％ '功能:取得文件扩展名 Function getFileExt(sFileNam
- 前言最近完整地看了一遍TypeScript的官方文档，发现文档中有一些知识点没有专门讲解到，或者是讲解了但却十分难以理解，因此就有了这一系列
- 本文实例讲述了JS+HTML实现的圆形可点击区域。分享给大家供大家参考，具体如下：方法一：<img>通过usemap映射到<
- 如下所示：'''@author: Jacobpc'''import osimport sys
- 前言本人做SSM项目的时候，在做删除功能时，发现找不到字段，在搜索了各种博客之后终于找到了解决办法一、报错Unknown column &a
- DBI安装：DBI详细信息参考：http://dbi.perl.org/ 1.下载DBI包： wget http://search.cpan
- 今天使用python计算数据相关性，但是发现计算出的表格中间好多省略号，而且也不对齐。这也太难看了。于是在程序里加了三行：pd.set_op
- 全文检索引擎入门灰常不幸的是，关系型数据库对全文检索的支持没有被标准化。不同的数据库通过它们自己的方式来实现全文检索，而且SQL
- 本文实例讲述了Python实现计算字符串中出现次数最多的字符。分享给大家供大家参考，具体如下：1. 看了网上挺多写的方法都没达到我所需要的效
- 前言：本文简单讲述全文索引的应用实例，MYSQL演示版本5.5.24。Q:全文索引适用于什么场合？A:全文索引是目前实现大数据搜索的关键技术
- 视频观看视频使用精灵这是我们“使用 Pygame 进行游戏开发”教程系列的第 2 部分。您应该从第
- 概述通过自定义网络, 我们可以自己创建网络并和现有的网络串联起来, 从而实现各种各样的网络结构.SequentialSequential 是
- Python是一种非常实用的高级编程语言，它的易读性和简洁性使其成为初学者的首选语言。然而，Python的功能远不止于此，它的强大库支持使其
- 一、什么是sql子查询？ 子查询是一个嵌套在Select 、Insert 、Update 或Dele
