简单的二级下拉菜单（转）

最新推荐文章于 2024-09-01 19:41:43 发布
最新推荐文章于 2024-09-01 19:41:43 发布
阅读量359 收藏
点赞数 1

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS下拉菜单实例演示-jquery分享</title>
<style>
body,ul,li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;}
a{ color:#000000; text-decoration:none;}
body{text-align:center; }
li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold; float:left;}
.list a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}
.list a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}
.list a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}
.list a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none; background-color:#BD06B4;}

#nav{width:600px;height:30px; margin:0 auto;padding:0px 5px; text-align:center; clear:both; margin-top:50px;}

.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}

.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand; filter:Alpha(opacity=70);-moz-opacity:0.7;}

.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}
</style>
</head>

<body>
<div id="nav">
 <ul>
 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">div+css 
 <div class="list">
  <a href="http://www.jqshare.com/">DIV CSS</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
  <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
 </div>
 </li>
 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.jqshare.com/">HTML入门</a>
 <div class="list">
  <a href="http://www.jqshare.com/">HTML入门</a><br />
        <a href="http://www.jqshare.com/">html是什么</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
 </div>
 </li>
 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.jqshare.com/">CSS入门</a> 
 <div class="list">
  <a href="http://www.jqshare.com/">DIVCSS5</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
 </div>
 </li>
 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.jqshare.com/">CSS HACK</a>
 <div class="list">
  <a href="http://www.jqshare.com/">DIV+CSS</a><br />
        <a href="#">我的首页</a><br />
        <a href="#">我的日志</a><br />
        <a href="#">我的相册</a><br />
        <a href="#">我的收藏</a><br />
 </div>
 </li>
 </ul>
</div>

</body>
</html>

Ba_Bella
关注
java二级下拉菜单_航菜单栏中的二级下拉菜单
weixin_42304604的博客
02-19 495
1.仅使用html和css*{margin:0;padding: 0;list-style: none;text-decoration: none;}#nav{width: 600px;height: 40px;background: #ccc;margin: 0 auto;}ul{background: #aaa}ul li{float:left; display:block; height: ...
bootstrap实现二级下拉菜单效果
08-28
Bootstrap 实现二级下拉菜单效果 Bootstrap 是一个流行的前端框架，提供了许多...使用 Bootstrap 实现二级下拉菜单效果非常简单和方便。 Bootstrap 提供了许多实用的 UI 组件和工具，帮助我们快速构建复杂的应用程序。
下拉菜单
weixin_34010566的博客
01-22 63
1.css 　　用display 和布局； 2.js 控制style中的display 用div做二级布局时，控制div高度。 3.jquery hide/show方法 toggle方法 4.中英文菜单切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
二级以下下拉菜单
前端小白成长记
07-20 356
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;style type="text/css"&gt;
jquery实现二级导航下拉菜单效果
Alvin博客
11-13 9894
大家都知道jQuery是一个框架，它对JS进行了封装，使其更方便使用。前面两篇博文分别是用CSS样式和JS实现的，那么这篇就用jQuery来实现二级下拉式菜单。 使用JQuery实现需要用到的知识有：        1)使用$(function(){...})获取到想要作用的HTML元素。       2)通过使用children()方法寻找子元素。       3)通过使用show()方
android二级下拉菜单,android中添加级联更新的下拉菜单
weixin_30653755的博客
05-25 351
package com.silei.day04_spinnercity;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.widget.AdapterVi...
动态二级下拉菜单html,jquery实现漂亮的二级下拉菜单代码
weixin_39719732的博客
06-03 757
本文实例讲述了jquery实现漂亮的二级下拉菜单代码。分享给大家供大家参考。具体如下：这里介绍一款基于jquery实现的网站下拉菜单，黑色风格，很漂亮，本菜单需要点击主菜单后的小三角符号才下拉出二级菜单，并不是有些菜单，是鼠标移上主菜单的时候就滑过，至于哪一种，就看个人的喜好了先来看看运行效果：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/D...
php 二级下拉菜单源码,二级联动菜单-PHP源码
weixin_32075843的博客
03-22 635
《script》ec(2);《script》二级联动下拉菜单 自家用的 js二级联动菜单 其实我觉得 asp二级联动菜单 与 php二级联动菜单 两个相同只是表示方式不一样.《script》function GetObjId(ObjName){//alert(document.all.tags('select')[i].name);for(i = 0; i < document.a...
【indirect 函数 ★二级下拉菜单】
WealthLucky的博客
09-01 1164
依次点开【数据】>>【数据验证】>>【自定义】这回要用公式来引用，我们写上：=INDIRECT(B1)，数据验证从第1行开始，就是B1，第2行，就是B2，与左侧对齐。第二层就需要先列好表格，可以按F5 【定位】到【常量】，在【公式】选项卡里找到【名称管理器】旁边的【根据所选内容创建】，根据【首行】创建一个自定义区域。首先第一个下拉列表我们可以用【数据验证】里的【序列】来做，可以自行输入，也可以分别列在表格上，框选这片区域。如果列出来的条件，是包含在工作表名称里，把剩余的用&连上补全就可以啦。
html css二级下拉菜单,下拉导航 - 两级菜单（CSS/HTML）
weixin_42357618的博客
08-03 1180
的“娱乐”按钮，将是唯一一个具有降下来了。 我已经设置了父母选择，但每个人都会有一小部分乐队悬停时。例：“舞蹈”将有大约7频带(频带＃1 - 频带＃7) 二次下拉应显示到母体下拉菜单的右侧。任何帮助将不胜感激。我一直在为此奋斗一段时间。我初步认识HTML(NAV)标记： DanceClassic Rock | Top 40 | RockCountryRockabilly | Reggae | Bl...
Access数据库-二级下拉菜单制作
03-29
Access数据库-二级下拉菜单制作
二级下拉菜单特效
06-06
在网页设计中，二级下拉菜单特效是一种常见的交互设计元素，尤其在网站的导航菜单中广泛应用。这种特效能够帮助用户更有效地浏览和访问网站的多层次结构，提高用户体验。本项目提供的"二级下拉菜单特效"旨在实现一种...
Javascript实现简单二级下拉菜单实例
10-25
本文将介绍如何使用Javascript来实现一个简单易用的二级下拉菜单。二级下拉菜单是一种常见于网页导航中的交互设计，它能够有效地组织和显示层级信息，并提供更加友好的用户界面。通过本文的介绍，读者将了解到HTML、...
jQuery实现简单二级下拉菜单
12-29
html代码 软件开发网</a></dt> 特效</a> 教程</a> 资源</a> 模板</a> 资讯<
无人机集群分层通信及连通性研究
10-18
针对强干扰环境，在采用窄波束固定安装的通信模块执行任务的过程中，采用一种无人机集群分层通信与连通性判断的方法，通过上下层无人机两两之间的通信关系，确定无人机集群的连通性。局部信息在集群中多次中转实现整体的信息共享，为绕飞搜索、队形保持、防止碰撞等措施的实现提供信息支持，是执行高风险、高难度复杂任务的一种高可靠、低成本的 方案。
花旗杯金融创新应用大赛——基于机器学习的上市公司信息披露质量评价系统.zip
10-18
花旗杯金融创新应用大赛——基于机器学习的上市公司信息披露质量评价系统
PHP-032校园二手旧货闲置物品交易网站毕业课程源码设计+论文资料
最新发布
10-18
编号：332 校园二手闲置旧货信息网站，为校园二手闲置旧货交易提供了网上平台。如今，随着电子商务的不断发展完善，大学校园也需要一个能为学生提供旧货物品交易的专用网站，以便发布各种商品信息。 本设计具有一般电子商务的功能，且体现出校园风格。该系统提供的功能包括注册、查询信息、发布信息等。本系统的特点在于应用了PHP技术。它是一种简单的动态脚本语言，具有开放源码、执行速度快的特点。该技术还支持广泛的数据库连接 ，具有大量的扩展库，安全性能高，易学易用。 系统管理员模块包括：系统配置管理、会员信息管理、网站新闻管理、物品信息管理、管理员管理、登录日志管理。用户模块包括：安全登录、找回密码、查询信息、发布信息、会员注册、物品类别、物品信息管理、会员信息修改。刚进入网站的非会员能够在此网站浏览和搜索信息，不仅能浏览旧货信息还能浏览到热门信息。经过注册成为会员便能发布信息。此系统还考虑到用户利用穷举法破解密码，专门设置了用户和管理员登录日志，以便及时了解和防范。
rhino grasshoper 查看及统一曲面法线方向.gh
10-18
【rhino@grasshoper 查看及统一面法线方向】https://www.bilibili.com/video/BV1ZCWpeLE2h?vd_source=b420114c993138474d2e93d83ead77a5
Android实现二级下拉菜单与快速搜索教程
摘要信息：“这篇文章主要介绍了在Android开发中如何实现二级下拉菜单和快速搜索功能。通过实例分析，详细讲解了布局设计和代码实现的关键步骤。” 在Android应用开发中，创建二级下拉菜单和快速搜索功能是提高用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值