这个二级纵向菜单完成是照着别人的例子写的，网上很多这样的代码，感觉这种最简单而且很容易理解，对css熟练的话几分钟就可以搞定，关键是和程序容易结合。
最终效果如图所示：
ul,li,a{margin:0;padding:0;} //这个很重要，我竟然不知道它会有缩进，郁闷
body {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size:12px;
}
#nav {
width:180px;
list-style-type: none;
text-align:left;
margin:10px 0 0 10px;
}
#nav a {
width: 180px;
display: block;
padding:5px 0 5px 20px;
}
#nav li {
background:#cccccc;
border-bottom:#ffffff 1px solid;
float:left;
}
#nav li a:hover{
background:#cc0000;
}
#nav a:link {
color:#666;
text-decoration:none;
}
#nav a:visited {
color:#666;
text-decoration:none;
}
#nav a:hover {
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
#nav li ul {
list-style:none;
text-align:left;
padding:0;
}
#nav li ul li{
background: #ebebeb;
}
#nav li ul a{
padding-left:20px;
width:180px;
}
#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:#cc0000;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
#nav li:hover ul { //以下代码不懂什么意思，好像无关紧要（去掉完全没影响）……
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
<body>
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">menu1</a>
<ul >
<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="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">menu2</a>
<ul id="ChildMenu2" class="collapsed">
<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="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">menu3</a>
<ul id="ChildMenu3" class="collapsed">
<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="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">menu4</a>
<ul id="ChildMenu4" class="collapsed">
<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>
</ul>
</body>
var LastLeftID = "";
function DoMenu(emid){
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
/*if((LastLeftID!="")&&(emid!=LastLeftID)){ //这一段注释掉以后运行依然正常……
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid; */
}
</script>
js很简单吧，整体感觉还是不错的，很实用。
- 大小: 3 KB
分享到：
相关推荐
DIV+CSS+JS二级树型菜单，二级菜单展开后刷新无影响
"使用CSS+jQuery实现的水平二级菜单"是一个常见的技术实践，它结合了层叠样式表（CSS）的样式控制与JavaScript库jQuery的动态效果，以实现优雅且功能丰富的菜单系统。下面将详细介绍这个主题中的相关知识点。 首先...
这个主题“CSS+JavaScript+XML实现二级菜单”涉及到Web开发中的三个核心技术：层叠样式表（CSS）、JavaScript和可扩展标记语言（XML）。接下来，我们将深入探讨如何利用这三者来构建一个功能完备、响应式的二级菜单...
div+css+js实现菜单的收缩与展开
3. **动画效果**：JavaScript可以实现更复杂的动画效果，例如使用`setTimeout`或`requestAnimationFrame`来控制二级菜单的展开和收起速度。 4. **状态管理**：为了防止多个二级菜单同时显示，可能需要维护一个状态...
例如，二级菜单的透明度和阴影效果就是通过CSS实现的，这增加了菜单的层次感和立体感。 2. **JavaScript（JS）**：JavaScript是一种客户端脚本语言，用于增加网页的交互性。`ddsmoothmenu.js`文件是这个DEMO中的...
-- 更多二级菜单项... --> <!-- 更多一级菜单项... --> ``` ```javascript // 更新JavaScript，以处理更多级别的菜单 function toggleSubMenu(e, level) { e.preventDefault(); var submenu = this....
Div+CSS+JS的三级树形菜单，很实用的。 一级菜单可以同时展开，二级菜单只能展开一个，其他自动关闭。 bitding 修正版。
二级菜单的展开和收起通常依赖于JavaScript或CSS3的`:hover`伪类。如果使用纯CSS实现，`:hover`可以应用于一级菜单项，当鼠标悬停时，二级菜单显示；移开鼠标时，二级菜单隐藏。这种方式简单且不需要JavaScript支持...
本资源是一篇关于使用 DIV、CSS 和 JS 实现二级树型菜单的教程。菜单可以展开多个栏目，刷新后不受影响。作者已经修正了原作中的错误，即#nav li的背景色和背景图片分开写了，造成背景色不生效。现在，菜单的背景色...
**标题：“CSS+JS选项卡式导航菜单”** 在网页设计中，选项卡式导航菜单是一种常见的用户界面元素，它允许用户在多个相关但独立的内容区域之间切换，而无需加载新的页面。这种设计模式提高了用户体验，因为它使得...
通常，一级菜单项会包含二级菜单项。例如： ```html 一级菜单1 <li><a href="#">二级菜单1.1</a></li> <li><a href="#">二级菜单1.2</a></li> <!-- 更多二级菜单项 --> <!-- 更多一级菜单项 --> ``` ...
本文将深入探讨如何使用JavaScript和CSS技术来创建一个美观且实用的弧形导航二级菜单。 首先，我们来看"导航"这一核心概念。在网页设计中，导航通常位于页面的顶部或侧边，用于列出网站的主要部分或子页面。一个好...
在这个"CSS+JQuery+XML二级菜单"的示例中，我们将深入探讨这三种技术如何协同工作来实现这一功能。 首先，CSS（层叠样式表）是网页设计的基础，用于定义页面元素的样式，如字体、颜色、布局等。在二级菜单的设计中...
例如，点击一级菜单时，显示或隐藏对应的二级子菜单。 3. **数据存储**：利用`localStorage`或`sessionStorage`来保存用户的偏好设置，如常开的子菜单，这样即使页面刷新，这些设置也能被保留。 4. **函数封装**：...
防刷新二级菜单Div+CSS+JS代码,非常好用，做网站经常要用到
在横向二级菜单中，js可以用来控制子菜单的显示和隐藏，当用户鼠标悬停在一级菜单项上时，二级菜单随即滑出。这可以通过监听事件，如`mouseover`和`mouseout`，结合DOM操作来完成。 导航菜单的“二级”结构意味着每...
总的来说，"CSS+JS鼠标经过显示二维码和二级菜单特效"是一个巧妙结合了前端技术的实例，展示了如何利用CSS和JavaScript增强网页的互动性和实用性。这种技术在电商网站、资讯平台或者个人博客等场景下尤为适用，可以...
2. 子菜单项：二级菜单，隐藏在主菜单项之下，根据用户交互动态显示。 3. 布局样式：使用浮动、相对定位或绝对定位来确保子菜单在主菜单下方正确显示，同时避免遮挡其他内容。 4. 动画效果：利用CSS3的`transition`...
]但在《CSS二级菜单》中，如果一级菜单中的超链接是#，那么只要单击该一级菜单，那么与这个一级菜单对应的二级菜单就会一直显示在网页中，不能隐藏，是一个小小的bug。后来仔细的想了一想，其实，无论是什么样的二级...