<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单演示</title>
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript>
<!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
window.onload=menuFix;
//--><!]]>
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
String[] submenus = {"二级菜单1.1", "二级菜单1.2", "二级菜单2.1", "二级菜单3.1", "二级菜单3.2"}; for (int i = 0; i ; i++) { db.execSQL("INSERT INTO menu (title) VALUES ('" + menus[i] + "')"); for...
文件名“二级菜单滑动”可能指的是一个包含示例代码、样式文件或资源的文件，用于演示如何创建这种垂直下滑的二级菜单效果。在实际项目中，你可以根据这个文件来学习并应用到自己的网页设计中。 总的来说，"垂直...
这是一个关于使用CSS和JavaScript实现简单二级菜单的代码特效资源。这个压缩包中包含了一个名为"codesc.net"的文件，很可能是HTML、CSS和JavaScript代码的集合，用于演示和实现所述效果。以下是对这个主题的详细说明...
在这种菜单中，选择一级菜单的一项会触发二级菜单的显示，二级菜单中的选项通常与一级菜单的选择有关联。这样的设计可以有效地减少用户在大量数据中寻找所需信息的时间，提高用户体验。 在本资源“二级联动菜单 ...
而“ppt”文件可能是关于如何设计和实现二级联动菜单的演示文稿，包含详细步骤和示例代码。具体的内容分析需要查看文件本身才能确定。 总之，二级联动菜单是提高用户在复杂信息架构中导航效率的有效工具。它的设计...
省市联动二级菜单是一种常见的前端交互设计，常用于网站或应用中的地址选择，用户在选择省份后，下级的菜单会自动更新为对应省份的城市列表。这种功能能够提高用户体验，减少用户手动输入，尤其是在处理大量的地理...
3. 二级结构：二级菜单意味着主菜单项下还有子菜单项，当用户悬停或点击主菜单时，子菜单会滑出或展开。这种交互设计可以通过CSS的`:hover`伪类和JavaScript来实现，提供更丰富的用户交互体验。 4. 响应式设计：...
在Windows Presentation Foundation（WPF）中，创建带有二级和三级菜单的复选框是一个常见的UI设计需求，尤其在构建复杂的用户界面时。WPF提供了一种灵活的方式来实现这样的功能，结合TreeView控件和...
在HTML中，可能会有一个父级元素作为触发器，比如一个按钮或下拉框，当用户点击这个元素时，JQUERY会显示隐藏的二级菜单。 JavaScript代码可能会涉及到以下关键点： 1. DOM操作：使用JQUERY的选择器找到需要操作的...
在网页设计中，二级菜单是常见的一种导航结构，它能够帮助用户更有效地浏览网站内容。本文将探讨如何使用jQuery来实现一个向下滑动的二级菜单，该菜单具有平滑的动画效果，使得交互体验更加友好。 首先，让我们了解...
本项目中的CSS代码负责二级菜单的视觉呈现，使其既美观又易于使用。 #### 3. HTML (HyperText Markup Language) HTML是一种标记语言，用于构建网页的基本结构。它是所有网页的基础，用于定义文本、图片和其他媒体...
【jQuery 实现简单二级菜单效果】\n\n在网页设计中，导航菜单是不可或缺的部分，尤其是在复杂的网站结构中，二级菜单能有效地引导用户浏览不同层级的内容。本实例将讲解如何利用 jQuery 实现一个简单的二级菜单效果...
通常，一级菜单项包含在`<ul>`（无序列表）中，而二级菜单项则作为一级菜单项的子元素，可以用`<li>`（列表项）包裹，并通过CSS隐藏（默认状态下）。 2. **CSS选择器**：利用CSS选择器，我们可以选择特定的HTML元素...
在网页设计中，一级菜单通常展示主类别，而二级菜单则作为一级菜单的子类别，形成一种树状的层级关系。这种结构清晰地展现了网站的信息架构，使得用户能够更快地定位到他们感兴趣的内容。 第一种二级树形导航菜单...
html实现好看的多种风格导航菜单(附源码)...每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。 效果演示介绍地址： ...
【描述】该特效的核心在于利用jQuery库来处理鼠标悬停事件，动态展示和隐藏二级菜单。当用户将鼠标移到一级菜单上时，对应的二级菜单会滑动出现，移开鼠标后则会自动收起。这种效果提高了用户体验，使网站的导航结构...
这些文件组合在一起，应该能构成一个简单的VB工程，演示如何使用API函数进行菜单动态增减。 总的来说，理解和应用菜单动态真增减是提升VB程序灵活性的关键技能之一，它涉及到对Windows API的掌握以及消息处理的深入...
本示例“ajax二级联动菜单”提供了一个简单的二级菜单实现，利用Ajax和JavaScript，配合.NET后端，帮助初学者理解Ajax的基本原理和应用。 首先，我们要了解什么是联动菜单。联动菜单，又称为下拉级联菜单，是指在一...
本话题聚焦于“jquery + servlet实现省市联动二级菜单”这一技术实践，这是一个常见的前端与后端协同工作的场景，主要用于提升用户体验，使得用户在选择省份时，市一级的下拉菜单能实时更新为相应省份的城市。...