1、 菜单二说明文档全部源码在最后面：一,整体的思路菜单二首先加载样式表 simple.css，simple.css 样式表中首先设置二级菜单为横着的。然后设置菜单栏中的二级菜单隐藏起来。最后通过加载 click_menu.js 脚本，给每个 li元素绑定了 onclick（单击事件） ，单击 元素，就显示隐藏的超链接，当鼠标移到另外的一个元素时，通过脚本事件设置以前的元素的样式为隐藏，然后当前单击的 元素的样式为显示。于是就做成了单机就可以显示二级菜单的菜单二二，具体的分析：Css 部分一样式表中如何设置菜单栏为横着：效果如下图：#menu li.sub background:#f80;floa
2、t:left; 里面的 float:left; 属性设置#menu li.sub 元素向着悬浮。注意：你可以通过去掉这个属性检测是不是通过这个属性就可以设置菜单栏为横着。二样式表中设置二级菜单为隐藏效果如下图：#menu ul position:absolute;left:-9999px;width:128px;里面的 left:-9999px;属性，意思是向左贴近，因为-9999 为负数，所以就被影藏了起来。详情请链接：http:/ li.click background:Blue; 注意上面这个是 css 里特有的属性选择器里的后代选择器。关于 CSS 选择器类型请查询：http:/ 元素
3、绑定样式。#menu li.click ulleft:0; top:24px; background:url(transparent.gif); 这个样式只有 class 为 name 下的 li 元素。且改 li 元素绑定了 click 函数，且该函数被触发了，那么这个元素下的元素才会应用上面的样式，而上面的样式正好是显示被隐藏的二级菜单。样式里的 left:0; 0 不是负数，所以不会被隐藏。脚本部分脚本代码：clickMenu = function(menu) var getEls = document.getElementById(menu).getElementsByTagName(
4、“LI“);var getAgn = getEls;for (var i=0; i这个代码是意思是：当 simple.html 文件里面的所有的元素和文件加载完后，调用这个函数。也就是调用 function(menu) 这个函数，在这个函数中我们的注意第二点了：当函数执行到 getElsi.onclick=function() 这一句时，意思是但单击 getElsi元素，就调用这个函数，其实这个函数可以写在外面，改一下就是：clickMenu = function(menu) var getEls = document.getElementById(menu).getElementsByTag
5、Name(“LI“);var getAgn = getEls;for (var i=0; istu nicholls dot com | menu - simple #outer width:748px; height:300px; background:url(clock.jpg) no-repeat right bottom; border:1px solid #ddd; border-width:5px 1px 1px; position:relative;#menu list-style-type:none; width:644px; padding:0; margin:0 auto;
6、#menu ul list-style-type:none; padding:0; margin:0;#menu li float:left; background:#088; margin:1px 1px 0 0;position:relative;#menu li.sub background:#f80;#menu li, #menu li a display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:160px; text-decoration:non
7、e; text-align:center; cursor:pointer; font-weight:bold;#menu li:hover, #menu li a:hover background:#c00;#menu ul position:absolute;left:-9999px;width:128px;#menu li.click background:#c00;#menu li.click ulleft:0; top:24px; background:url(transparent.gif); /* the background image is for IE7 */clickMen
8、u = function(menu) var getEls = document.getElementById(menu).getElementsByTagName(“LI“);var getAgn = getEls;for (var i=0; iProductsWall ClocksWatchesPocket WatchesChronometersAstronomicalPendulumServicesRepairServicingBattery ReplacementCleaningShop OnlineCatalogueMail OrderContactsSupportSalesBuyingClock MakersStockistGeneral
