<!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>nav</title>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+="on";
}
node.onmouseout=function() {
this.className=this.className.replace("on", "");
}
}
}
}
}
window.onload=startList;
-->
</script>
<style type="text/css">
<!--
body {
font-size: 12px
font-family: Arial,Verdana,Helvetica,sans-serif;
}
ul{
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
ul li {
position: relative;
}
ul li ul {
position: absolute;
left: 199px;
top: 0;
display: none;
list-style: none;
width: 200px;
margin: 0;
padding: 0;
}
ul li a {
display: block;
text-decoration: none;
background: #cccccc;
padding:5px 0 5px 20px;
border: 1px solid #ffffff;
border-bottom: 0;
color:#666666;
}
ul li a:hover {
background: #cc0000;
color:#ffffff;
font-weight:bold;
}
* html ul li {
float: left;
height: 1%;
}
* html ul li a {
height: 1%;
}
li:hover ul, li.on ul {
display: block;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">menu1</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
</li>
<li><a href="#">menu2</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
</ul>
</li>
<li><a href="#">menu3</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
</ul>
</li>
<li><a href="#">menu4</a>
<ul class="nav2">
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
<li><a href="#">third</a></li>
<li><a href="#">forth</a></li>
<li><a href="#">fifth</a></li>
<li><a href="#">sixth</a></li>
</ul>
</li>
</ul>
</body>
</html>
- 大小: 13.8 KB
分享到：
相关推荐
标题“二级菜单效果（3）”暗示我们将讨论一个关于二级菜单实现的系列内容中的第三个部分。 二级菜单通常出现在网站或应用程序的导航结构中，它为用户提供更深层次的导航选项，帮助他们更容易地访问复杂的信息架构...
在Windows Presentation Foundation（WPF）框架中，创建自定义二级菜单是实现用户界面（UI）交互性和美观性的重要部分。WPF提供了丰富的功能和灵活性，允许开发者构建动态且具有高度定制性的界面。以下是对"wpf...
### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前，我们需要定义页面的基本结构。通过HTML代码，我们可以创建一个带有子菜单的父级菜单项。在这个例子中，我们使用了一个`...
在“水平导航菜单+二级菜单效果”这个项目中，主要使用了HTML（超文本标记语言）和JavaScript技术来实现这一功能。HTML是网页的基础，负责定义页面结构，而JavaScript则用来增加交互性和动态效果。 1. HTML部分： ...
最后，为了提高用户体验，可以在一级菜单的ListView中使用HeaderView来显示二级菜单的标题，同时二级菜单的ListView可以使用HeaderView来模拟嵌套效果。这样，用户就能看到清晰的层级关系。 以上就是如何使用SQLite...
本文将深入探讨如何使用JavaScript实现鼠标经过显示二级菜单的效果，以及这个效果的可拓展性。 首先，我们需要理解基本的HTML结构，通常一级菜单和二级菜单可以通过`<ul>`和`<li>`标签来构建。一级菜单的每个项目都...
一个简单的二级导航菜单通常由一级菜单项和二级子菜单组成。一级菜单通常显示在页面的顶部或侧边，当用户悬停在某个一级菜单项上时，相应的二级子菜单会滑出或展开。这种效果可以通过CSS实现静态样式，但动态交互...
1. 清晰性：二级菜单的内容应与一级菜单紧密相关，让用户一眼就能明白每个选项的含义。 2. 一致性：二级菜单的布局和交互应保持在整个应用或网站中的一致性，以便用户形成使用习惯。 3. 易用性：避免过多的层级，...
1. **CSS选择器**：在创建二级菜单时，我们需要使用到精准的选择器来定位和样式化各个元素。例如，我们可以使用`ul > li`来选择一级菜单项，`li ul`来选择一级菜单下的子菜单，以及`li:hover > ul`来实现鼠标悬停时...
- 布局文件中，一级菜单ListView和二级菜单ListView需用到`<include>`标签进行嵌套，以实现联动效果。 2. **自定义适配器**： - 创建自定义的Adapter，用于填充两个ListView的数据。适配器需要持有两个列表数据源...
"鼠标移到菜单上弹出二级菜单特效"是一个常见的网页交互元素，尤其适用于导航菜单。这种特效通常用于当用户将鼠标悬停在主菜单项上时，会展示出与之相关的子菜单项，以便用户能够更快速地访问他们感兴趣的内容。 在...
下面我们将深入探讨如何利用AS3.0实现二级菜单的鼠标经过弹出效果。 首先，我们需要了解ActionScript 3.0的基础知识。AS3.0是Flash Professional中的编程语言，它具有面向对象的特性，使得代码更加结构化和易于维护...
1. 创建子RecyclerView：为每个一级菜单项创建一个嵌套的RecyclerView，用于展示二级菜单项。 2. 适配器结构：设计一个包含两个级别的适配器，一级适配器管理所有一级菜单，二级适配器管理对应的一级菜单下的二级...
1. 主菜单项：一级菜单，当鼠标悬停或点击时触发二级菜单的显示。 2. 子菜单项：二级菜单，隐藏在主菜单项之下，根据用户交互动态显示。 3. 布局样式：使用浮动、相对定位或绝对定位来确保子菜单在主菜单下方正确...
二级菜单1-1 二级菜单1-2 一级菜单2 二级菜单2-1 二级菜单2-2 ``` 三、CSS美化 通过CSS，我们可以定义菜单的样式，如颜色、字体、边距等，以及二级菜单的滑入滑出效果。例如，我们可以设置隐藏二...
1. **HTML结构**：创建一个基础的HTML结构，如`<ul>`嵌套`<li>`元素，每个`<li>`代表一级菜单项，其中包含二级菜单的`<ul>`。 2. **CSS样式**：通过CSS控制菜单的外观，包括颜色、字体、位置等，同时设置下拉效果，...
在IT领域，二级菜单是一种常见的用户界面元素，用于在主菜单下组织更具体的子功能或选项。在诸如美团、大众点评、淘宝和饿了么这样的应用程序中，二级菜单发挥着至关重要的作用，帮助用户快速定位并访问他们需要的...
【京东首页+京东二级菜单(原版效果)】是一个关于京东网站前端开发的资源，主要涉及的是京东二级菜单的设计和实现。这个资源可能是从京东官方网站上精确克隆下来的，因此可以保证是“绝对的原版”，供开发者学习和...
1. 水平展开：二级菜单在一级菜单下方水平延伸，适用于横向空间充足的情况。 2. 垂直展开：二级菜单在一级菜单右侧垂直下降，适合窄屏或空间有限的界面。 3. 悬停弹出：二级菜单以弹出框的形式出现，可以避免遮挡...
1. 创建自定义的菜单布局，包括一级菜单和隐藏的二级菜单。 2. 编写折纸动画的逻辑，设置动画的持续时间、插值器和动画监听器。 3. 在点击一级菜单项时启动动画，同时显示二级菜单。 4. 添加手势检测，确保用户可以...