<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单演示</title>
<style type="text/css">
<!--
body{
background-color:white;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
list-style-position:outside;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
a:visited{
color:#336601;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#BD06B4;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px 5px;
position:absolute;
z-index:1;
}
.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;
overflow-y:hidden;
}
.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 class="list">
<a href="#">项目管理</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'">公司管理
<div class="list">
<a href="#">公司管理><br />
<a href="#">公司管理><br />
<a href="#">公司管理><br />
<a href="#">公司管理><br />
<a href="#">公司管理><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">系统管理
<div class="list">
<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'">帮助
<div class="list">
<a href="#">帮助</a><br />
<a href="#">关于</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
是几个小程序的综合体，包括猜数 知识问答等
一共3个文件: ...getData.asp data.mdb 前台采用ExtJs 2.2.1编写(由于库文件比较大，考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access...本例子演示的4级联动菜单:州+国家+城市+地区
而下拉菜单是网页中常见的交互元素，可以有效地组织和展示导航链接，节省页面空间。本文将结合上述提供的内容，详细介绍如何利用jQuery实现一个ul标签下的动态下拉菜单效果。 首先，HTML结构是创建下拉菜单的基础。...
本DEMO演示是关于如何使用JavaScript来实现可展开和隐藏的侧边栏下拉菜单。下面将详细介绍这个主题及其相关知识点。 首先，我们来理解JavaScript的基础。JavaScript是一种广泛应用于客户端Web开发的脚本语言，它...
这个示例代码将包含HTML结构和相应的CSS样式，演示如何实现跨浏览器的兼容性，以及如何通过纯CSS实现下拉菜单的展开和收起效果。通过研究这个实例，开发者不仅可以学会创建这样的菜单，还能进一步提升对CSS兼容性...
综上所述，这个压缩包中的资源可能是用来演示如何在PowerBuilder应用程序中动态创建下拉菜单的实例。通过研究`pbmenu.pbw`项目文件，`.pbl`库中的代码，以及`App.ini`中可能存在的配置信息，我们可以了解整个动态...
综上所述，"ios-下拉菜单的选择.zip"中的ButtonDemo项目很可能演示了如何在iOS应用中创建一个简单的下拉菜单，使用UIButton触发，可能利用UITableView或UIPickerView来显示选项，并通过事件处理和数据源协议实现交互...
在网页设计中，下拉菜单通常用于提供用户多个选择项，比如在表单中选择一个城市或国家。传统的HTML `<select>` 元素虽然简单易用，但其样式定制性有限，不能很好地适应现代网页的视觉需求。为了解决这个问题，开发者...
这种特效通常用于导航或展示一系列选项，类似于网页中的下拉菜单。在Microsoft Office XP及后续版本中，用户可以轻松地添加这种效果到他们的幻灯片中。 要实现PPT下拉式菜单特效，首先你需要在PowerPoint中创建一个...
下拉菜单通常是一个子菜单，可以通过`AppendMenu`或`InsertMenu`函数添加到菜单栏中。每个菜单项可以设置为具有一个关联的回调函数，当用户选择该选项时，该函数会被调用。 在命令行环境下，C语言实现下拉式菜单...
"jQuery大型下拉菜单插件booNavigation"就是这样一个工具，专为创建高效且具有视觉吸引力的下拉菜单而设计。这款插件基于JavaScript库jQuery，简化了开发过程，使得即使是对前端编程不太熟悉的开发者也能轻松实现...
4. 示例页面或测试文件：用于演示如何在实际项目中集成和使用这个下拉菜单组件。 学习这个开源组件，开发者可以了解到如何利用CSS创建响应式布局，以及如何使用JavaScript处理事件和实现动态效果。同时，它还展示了...
本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果。分享给大家供大家参考。具体如下： 这是一款微软官网导航菜单，兼容好的下拉菜单，微软官网导航效果，在IE6下没有动画效果，顺便也把IE6的效果给加上，...
在网页设计中，导航菜单是不可或缺的部分，尤其在大型网站中，为了清晰地展示大量信息层级，三级下拉菜单的应用非常普遍。本实例主要讲解如何使用jQuery库来创建一个兼容各浏览器、小巧实用的三级下拉菜单。jQuery以...
下拉菜单通常用于在有限的空间内展示更多的导航选项。它是一个包含子菜单项的主菜单项，当用户悬停在主菜单上时，子菜单会滑动出现。这可以通过CSS的`display`属性控制，通常配合JavaScript实现动态交互效果。 **...
在“vba制作动态下拉菜单0919.xls”这个文件中，很可能包含了实际的VBA代码和演示了动态下拉菜单功能的Excel工作簿。通过查看和分析这个文件，你可以更深入地理解如何应用这些概念。记住，始终要谨慎处理来自互联网...
总的来说，"点击Button弹出下拉菜单"的实现涉及了Android的基础控件使用、事件监听、自定义视图以及PopupWindow的使用。开发者需要理解这些组件的工作原理，并根据实际需求进行适当的定制，以提供更丰富的交互体验。...
本教程将详细解释如何在Excel单元格内创建二级下拉菜单，以省市名称为例进行演示。 首先，我们需要准备数据。在Excel的第一个工作表中，按照地理位置的层次关系输入数据。例如，A列输入一级行政区划（如北京市、...
在PPT演示文稿中，下拉菜单特效是一种吸引观众注意力并提高交互性的设计手法。这种特效使得观众可以通过点击一个按钮或图标，展开一个隐藏的列表，就像在网页或应用程序中常见的下拉菜单一样。这样的功能可以有效地...