首页 / 脚本样式 / JavaScript / 用css和js控制UL实现的二级菜单

<style type="text/css">*{margin:0px;padding:0px;} .my_nav{ width:163px;font-size: 12px;font-family: Arial,Verdana,Helvetica,sans-serif;}ul /** 一级菜单 */{list-style: none;width:163px;}ul li /** 一级菜单菜单项 */{position: relative;display:block;}ul li ul /** 二级菜单，初始时二级菜单隐藏：display: none */{position: absolute;left:162px;top: 0;width:163px; display: none;list-style: none; z-index:50;}ul li a /** 一级菜单菜单项链接样式 */{display: block;text-decoration: none;background: #cbc9c8;height:20px;border: 1px solid #ffffff;border-bottom: 0;color: #666666;padding-left:10px;line-height:20px;}li:hover a,li.showStyle a /** 当鼠标放在一级菜单项上，一级菜单（弹出样式：showStyle）菜单项链接样式：背景 */{ background:#ebeaeb; }li:hover ul li a,li.showStyle ul li a /** 当鼠标放在一级菜单项上，二级菜单（弹出样式）菜单项链接样式：背景 */{ background: #cbc9c8; }ul li a:hover /** 当鼠标放在一级菜单项上，一级菜单（弹出样式:showStyle）菜单项链接样式：字体粗体 */{font-weight: bold; }li:hover ul li a:hover,li.showStyle ul li a:hover /** 鼠标在二级菜单（同时在当前一级菜单），二级菜单项的背景*/{ background: #ebeaeb; }* html ul li{float: left; }li:hover ul, li.showStyle ul /** 鼠标在一级菜单上，二级菜单样式为showStyle，打开：display: block */{display: block;margin-bottom:0px; }</style><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. // 放上鼠标时把样式改成showStyle，打开{ this.className+="showStyle";}node. // 放上鼠标时把样式改成空，隐藏{ this.className=this.className.replace（"showStyle", ""）;}} } } } window. onload = showNavList; </script><p class="my_nav"><ul id="nav"><li><a href="#">About IMBA</a><ul class="nav2"><li><a href="#">Program Features</a></li><li><a href="#">Class Profile</a></li><li><a href="#">Industry Cooperation</a></li><li><a href="#">Program Milestone</a></li></ul></li><li><a href="#">Academics </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="#">Extra Curricula </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="#">Intl Exposure </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><li><a href="#">Careers </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><li><a href="#">Student</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><li><a href="#">Alumni </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><li><a href="#">Admission </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></p>