js左侧三级菜单导航实例代码

效果演示

实例代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' XML : lang=' EN ' lang=' EN ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=iso-8859-1 '/title demo/title style type=' text/CSS '！-Helvetica阿里亚尔，无衬线；font-size : 11px} #nav，# nav ul { list-style : none；背景： # f9f 9 font-weight :粗体；padd : 0pxmargin : 0pxborder :固体1px # CCCCCC；边框-底部： 0px宽度： 150像素；文本-左对齐：} # nav ul ul { border : solid 1px # CCCCCC；边框-底部： 0px} #导航a {显示：块；宽度： 150像素；w \ idth : 140 pxcolor : # 333333文本装饰：无；文本对齐：中心；边框-底部：固体1px # CCCCCC；文本-左对齐：左填充： 10px} # nav a :悬停{ color : # 336666} # nav . a精选{后台： URL(http://BBS。蓝色的想法。com/images/common/bb _ expand。gif)无重复权50%；} # nav Li {线高： 22px相对位置：} # nav Li ul {位置：绝对值；左：-999 em；宽度： 150像素；字体粗细：正常；margin : 0pxpadding : 0px } # nav Li Li { width : 150 px } # nav Li ul a { width : 150 pxw \ idth : 126 pxpadding : 0px 12px线高： 22px文本-左对齐：} # nav Li ul ul {余量： 0 px 0 150 px} #nav li :悬停ul ul，# nav Li。SF悬停ul ul ul { left :-999 em；} #nav li:hover ul，#nav li:hover ul，#nav li.sfhover ul，#nav li。SF悬停ul {左： auto} #nav li:hover ul，#nav li。SF悬停ul {左： 150 pxtop: 0px} #nav li:hover，#nav li。SF悬停{背景： # F5E3C 0；} * html #nav li {左侧浮动：高度： 1%;} * html #nav阿利{身高：1%；}-/style/head body pa href=' JavaScript : history。Back()' Back/a/p ul id=' nav ' lia href=' Home/a/Li lia href='/关于我。html '关于我/a/Li lia class=' selected ' href='/教程。html '教程/a ul lia href=' # '子菜单31/a/Li lia class=' selected ' href=' # '子菜单32/a ul lia href=' # ' Sub ' 423/a/Li lia href=' # '子菜单424/a/li /ul /li lia href='# '子菜单43/a/li lia href='# '子菜单44/a/li /ul /li lia href='# '联系我/a/li /ul /body /html