用别人的菜单实现修改起来总是觉得麻烦，终于自己写了一个，关于mouseleave 和mouseout的问题到快放弃的时候才在网上找到问题的原因。
<!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">
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
$("#menu>div>div:first-child").each(function(){
$(this).next().addClass("subMenu").hide();
$(this).bind("mouseover", function(){
$(".subMenu").hide();
$(this).next().show();
});
});
$(".subMenu").each(function(){
$(this).bind("mouseleave click", function(){
$(this).hide();
});
});
});
</script>
<style type="text/css">
#menu>div{
width:100px;
float:left;
background: lightblue;
border: 0px solid red;
margin-right:5px
}
.subMenu{
padding:0px
}
.subMenu div:hover{
background: lightgreen;
cursor:pointer
}
</style>
</head>
<body>
<div id="menu">
<div>
<div>菜单1</div>
<div>
<div>菜单1-1</div>
<div>菜单1-2</div>
<div>菜单1-3</div>
</div>
</div>
<div>
<div>菜单2</div>
<div>
<div>菜单1-1</div>
<div>菜单1-2</div>
</div>
</div>
</div>
</body>
</html>
相关推荐
在创建二级菜单时，通常会用到多个div来组织菜单结构，例如一个div作为主菜单容器，每个菜单项则由另一个div包裹，二级菜单则隐藏在一级菜单项下，通过CSS的`display`属性控制其可见性。 为了实现红色大气的视觉...
6. **定位**：为了使二级菜单在一级菜单下方正确显示，我们需要使用CSS的定位属性，如`position`（静态、相对、绝对、固定）、`top`、`bottom`、`left`、`right`。通过相对定位，二级菜单可以相对于其父元素进行调整...
"实用纯css+div二级图片导航菜单"是一个基于CSS（层叠样式表）和HTML（超文本标记语言）的无脚本解决方案，尤其适用于那些希望避免使用JavaScript或其他脚本语言的开发者。下面将详细介绍这种技术及其相关知识点。 ...
### 鼠标悬浮显示二级菜单效果的实现 #### 1. HTML布局 在实现鼠标悬浮显示二级菜单效果之前，我们需要定义页面的基本结构。通过HTML代码，我们可以创建一个带有子菜单的父级菜单项。在这个例子中，我们使用了一个`...
例如，我们可以创建一个主`div`来包含整个菜单，然后为一级菜单和二级菜单分别创建子`div`。 CSS（Cascading Style Sheets）是用于定义网页样式的语言，它在构建这个横向二级菜单中起着关键作用。我们可以通过CSS来...
在创建二级菜单时，一级菜单和二级菜单通常都会被包裹在各自的`div`中。通过CSS，我们可以对这些`div`进行样式设置，比如设定它们的位置、大小、颜色等。二级菜单的`div`在默认情况下通常是隐藏的，只有当触发了特定...
防刷新二级菜单Div+CSS+JS代码,非常好用，做网站经常要用到
要创建一个圆角二级菜单，我们需要以下几个关键的CSS属性： 1. **边框半径（border-radius）**：这是实现圆角效果的核心属性。通过设置`border-radius`值，我们可以让菜单项的角落变得圆润。例如，`border-radius: ...
DIV+CSS+JS二级树型菜单，二级菜单展开后刷新无影响
这个“div折叠菜单”实例主要针对二级菜单，这意味着它包含一个主菜单，当用户点击主菜单项时，会展开或收起对应的子菜单。这种设计在节省空间的同时，提供了清晰的层次感，使网站界面更加整洁。 首先，我们来详细...
例如，二级菜单可能需要相对于其父元素进行绝对定位，而三级菜单则需要相对于二级菜单定位。 4. **响应式设计**：考虑不同屏幕尺寸下的显示效果，可能需要使用媒体查询（`@media`）来调整菜单在小屏幕设备上的布局...
本项目“JS飞符合web标准DIV二级下拉菜单”正是为了实现这样的功能，它利用JavaScript、CSS（层叠样式表）和HTML（超文本标记语言）中的DIV元素来构建一个符合Web标准的多级下拉菜单。Web标准指的是遵循W3C（万维网...
二级导航菜单的展开和收缩可能通过CSS的`display`属性来控制，例如，当鼠标悬停在一级菜单上时，二级菜单的`display`属性会从`none`变为`block`，显示子菜单。 在实际应用中，这个圆形二级导航菜单可能适合用于那些...
DIV CSS技术实现的鼠标悬念下拉出大面积的二级菜单，这种菜单微软、Adobe等大公司网站上目前还在使用，严格来说这不像是菜单，但却有着体验很好的导航功能，当菜单显示时，篇幅占据几乎整个窗口，面积比较大的菜单...
<TITLE> 二级下拉特效 ; charset=utf-8" http-equiv=Content-Type> <META name=GENERATOR content="MSHTML 8.00.6001.19222"></HEAD> <div id="headm"> <li><a class="topa" href="http://www. .com">...
通过这种方式，我们可以创建一个交互式的HTML折叠菜单，其中包含“+”和“-”号，以及一级和二级菜单。这不仅提升了用户体验，也使网站的导航结构更加清晰。在实际项目中，可能还需要考虑其他因素，如响应式设计以...
"二级菜单结合图片轮播小Demo"是一个为初学者设计的实践项目，它展示了如何利用基础的JavaScript、HTML div元素、CSS样式以及图片处理技术来实现一个功能丰富的网页组件。在这个小Demo中，我们将深入探讨以下几个...
纯div+css制作的两级菜单
对于三级菜单，我们需要至少三层`div`结构：一级菜单、二级菜单和三级菜单。一级菜单通常显示在页面顶部，当用户鼠标悬停在一级菜单项上时，二级菜单会弹出显示；同理，当鼠标悬停在二级菜单项上，三级菜单则会弹出...
对于"二级菜单"，这意味着下拉菜单不仅包含一个层次的内容，还包含子菜单，可能需要进一步展开。实现二级菜单，可以嵌套`<div>`，或者利用CSS的`position`属性来调整子菜单的位置，使其相对于父菜单呈现。同样，使用...