二级菜单

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量401 收藏
点赞数
文章标签： div function xhtml javascript menu html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asd135821jkl/article/details/6974479
版权
 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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>
    <style type="text/css">
    #menu
    {
        width:300px;
        margin:auto;
    }
#div1
{
display:none;
font-size:12px;
position:relative;
left:0px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div2
{
display:none;
font-size:12px;
position:relative;
left:50px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div3
{
display:none;
font-size:12px;
position:relative;
left:120px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
#div4
{
display:none;
font-size:12px;
position:relative;
left:200px;
top:0px;
background-color:White;
padding:5px 10px 0px 10px;
width:320px;
}
    </style>
    <script language="javascript" type="text/javascript">
        //显示层
        function showDiv(divName) {
            document.getElementById(divName).style.display = "block";
        }
        //隐藏层
        function hiddenDiv(divName) {
            document.getElementById(divName).style.display = "none";
        }
    </script>
</head>
<body>
<div id="menu">
<a href="#" οnmοuseοver="showDiv('div1')" οnmοuseοut="hiddenDiv('div1')">菜单一</a>
 | 
<a href="#" οnmοuseοver="showDiv('div2')" οnmοuseοut="hiddenDiv('div2')">菜单二</a>
 | 
<a href="#" οnmοuseοver="showDiv('div3')" οnmοuseοut="hiddenDiv('div3')">菜单三</a>
 | 
<a href="#" οnmοuseοver="showDiv('div4')" οnmοuseοut="hiddenDiv('div4')">菜单四</a>
<div id="div1" οnmοuseοver="showDiv(this.id)" οnmοuseοut="hiddenDiv(this.id)">
<a href="#">子菜单一</a>
</div>
<div id="div2" οnmοuseοver="showDiv(this.id)" οnmοuseοut="hiddenDiv(this.id)">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
</div>
<div id="div3" οnmοuseοver="showDiv(this.id)" οnmοuseοut="hiddenDiv(this.id)">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
</div>
<div id="div4" οnmοuseοver="showDiv(this.id)" οnmοuseοut="hiddenDiv(this.id)">
<a href="#">子菜单一</a>
<a href="#">子菜单二</a>
<a href="#">子菜单三</a>
<a href="#">子菜单四</a>
</div>
</div>
</body>
</html>

寒哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
二级下拉菜单布局（纵向、横向）
Number7421的博客
04-27 2万+
一级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下：&lt;ul class="clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&
HTML+CSS制作二级菜单栏
热门推荐
孙婷婷的博客
12-24 2万+
今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！ 效果图附上： 首先：我已链接了外部样式重置，所以无需自己亲自写： reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！ 链接：https://pan.baidu.com/s/1doPA17vy--Qt...
——二级菜单
qq_41299071的博客
01-16 140
二级菜单 body,h3,ul,li{ margin: 0; padding: 0; list-style: none; } ul li{ width: 200px; height: 50px; line-height: 50px; text-align: center; border:1px solid red; } ul{ position: relativ
html 二级菜单
hzl529的博客
11-12 7616
先放效果图： 首先设置菜单的基本轮廓 <div id="nav"> <ul> <li><a href="#">一级菜单1</a></li> <li><a href="#">一级菜单2</a></li> <li>...
python制作二级菜单_python之tkinter使用-二级菜单
weixin_39875805的博客
11-26 1780
# 菜单功能说明：二级菜单import tkinter as tkfrom tkinter import messageboxroot = tk.Tk()root.title('菜单选择')root.geometry('200x160') # 设置窗口大小def file_fn():label['text'] = '选择了文件的二级菜单！'label.config(fg='red')def se...
JS二级菜单
xing942012的博客
11-26 2114
我们使用HTML+css+js来写出二级菜单的简易效果 首先来看HTML的代码，这个没什么好说的 <div class="box"> <div class="topbox"> <ul> <li class="bgc">春雨</li> <li>夏风</li> <li>秋雾</li> <li>冬雪</li> &l
二级菜单二级菜单二级菜单
12-19
二级菜单
Windows系统桌面右键菜单及二级菜单设置
01-14
而通过编辑注册表，我们可以自定义这个菜单，添加新的选项，甚至创建二级菜单，以满足个性化需求或提高工作效率。本文将详细介绍如何利用注册表编辑器来实现这一操作。 首先，我们要了解注册表是Windows系统中的...
Android实现横向二级菜单
09-02
本教程将详细介绍如何在Android平台上实现一个横向二级菜单，这种菜单通常用于提供更精细的导航选项，提升用户体验。横向二级菜单在许多应用程序中都有应用，其美观的设计能吸引用户的眼球。 实现横向二级菜单主要...
延迟二级菜单特效代码
03-20
延迟二级菜单的工作原理在于，当鼠标悬停在一级菜单项上时，不会立即显示二级菜单，而是会有一个短暂的延迟时间，允许鼠标可以自然滑动到二级菜单的位置而不必立刻移开一级菜单。这种设计使得用户有足够的时间去定位...
第二章-在HTML中使用JavaScript
2301_79858637的博客
07-07 1100
事实上，WEB的核心语言是HTML，如何做到让JavaScript既可以与HTML页面共存，又不影响页面在其他浏览器中的呈现效果呢？要为WEB浏览器提供核心的脚本支持.
ES6 新特性有哪些
weixin_64684095的博客
07-06 1048
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 415
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
Webkit简介以及工作流程
最新发布
读心悦
07-10 201
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 172
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
drupal网站二级菜单
06-20
Drupal是一个强大的开源内容管理系统（CMS），它提供了丰富的模块化架构，包括灵活的菜单系统，以支持各种层次的导航，二级菜单就是其中的一部分。在Drupal中，创建和管理二级菜单通常涉及以下几个步骤： 1. **安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值