效果演示：

实例代码：

<!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" 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">
<!--
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
}
#nav, #nav ul {
 list-style: none;
 background: #F9F9F9;
 font-weight: bold;
 padding: 0px;
 margin: 0px;
 border: solid 1px #CCCCCC;
 border-bottom: 0px;
 width: 150px;
 text-align: left;
}
#nav ul ul{
 border: solid 1px #CCCCCC;
 border-bottom: 0px;
}
#nav a {
 display: block;
 width: 150px;
 w\idth: 140px;
 color: #333333;
 text-decoration: none;
 text-align: center;
 border-bottom: solid 1px #CCCCCC;
 text-align: left;
 padding-left: 10px;
}
#nav a:hover{
 color: #336666;
}
#nav a.selected{
 background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%;
}
#nav li {
 line-height: 22px;
 position: relative;
}
#nav li ul {
 position: absolute;
 left: -999em;
 width: 150px;
 font-weight: normal;
 margin: 0px;
 padding: 0px;
}
#nav li li {
 width: 150px;
}
#nav li ul a {
 width: 150px;
 w\idth: 126px;
 padding: 0px 12px;
 line-height: 22px;
 text-align: left;
}
#nav li ul ul {
 margin: 0px 0 0 150px;
}
#nav li:hover ul ul,#nav li.sfhover ul ul{
 left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
 left: auto;
}
#nav li:hover ul,#nav li.sfhover ul{
 left: 150px;
 top: 0px;
}
#nav li:hover, #nav li.sfhover {
 background: #F5E3C0;
}
* html #nav li {
 float: left;
 height: 1%;
}
* html #nav li a {
 height: 1%;
}
-->
</style>
</head>
<body>
<p><a href="javascript:history.back()">Back</a></p>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/aboutme.html">About Me</a></li>
<li><a class="selected" href="/tutorials.html">Tutorials</a>
 <ul>
 <li><a href="#">Sub Menu 31</a></li>
 <li><a class="selected" href="#">Sub Menu 32</a>
 <ul>
 <li><a href="#">Sub Menu 321</a></li>
 <li><a href="#">Sub Menu 322</a></li>
 <li><a href="#">Sub Menu 323</a></li>
 <li><a href="#">Sub Menu 324</a></li>
 </ul>
 </li>
 <li><a href="#">Sub Menu 33</a></li>
 <li><a href="#">Sub Menu 34</a></li>
 </ul>
</li>
<li><a class="selected" href="/gallery/gallery.html">Gallery</a>
<ul>
 <li><a href="#">Sub Menu 41</a></li>
 <li><a class="selected" href="#">Sub Menu 42</a>
 <ul>
 <li><a href="#">Sub Menu 421</a></li>
 <li><a href="#">Sub Menu 422</a></li>
 <li><a href="#">Sub Menu 423</a></li>
 <li><a href="#">Sub Menu 424</a></li>
 </ul>
 </li>
 <li><a href="#">Sub Menu 43</a></li>
 <li><a href="#">Sub Menu 44</a></li>
 </ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>

js左侧三级菜单导航代码的更多相关文章

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

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  2. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  3. python实现三级菜单源代码

    8月4号早晨天气晴,继续学习‘Alex’的python视频,写了用字典实现三级菜单的代码,都是循环和判断比较lower,废话不多说直接贴码: #!/user/bin/env python #-*-co ...

  4. 30行代码实现js原生三级联动菜单

    var oneArr=[['00','成都'],['01','绵阳'],['02','南充']] var towArr={ '00':[['000','武侯区'],['002','锦江区']], '0 ...

  5. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  6. React+Ant Design设置左侧菜单导航路由的显示与隐藏（与权限无关）

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  7. js下拉框二级关联菜单效果代码具体实现

    这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  8. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  9. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

随机推荐

  1. 苹果 App 转移图文详解

    目前公司在做App转移操作,在网上搜索相关资料加上自己的亲自操作,整理成一个文档,希望能给你提供帮助. 如转载请添加出处. 此文章只是为了记录一个Apple ID下的APP,转移到另外一个Apple ...

  2. css3的一些属性

    以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合anima ...

  3. SQL Server和MySql获取当前数据库每个表的列数

    Sql server:(连接数据库后,点击当前数据库再新建查询) select count(c.name),o.name from syscolumns c left join sysobjects ...

  4. 如何修改MFC发布程序的图标

    (1)第一种方法,直接替换工程路径下面res下面的ico图标,然后重新编译,一般需要重启系统才会生效: (2)第二种方法,在VS工程资源预览窗口的ICO下增加一个ico资源,名为IDR_ICON1,然 ...

  5. 运用Python语言编写获取Linux基本系统信息(一)：获得Linux版本、内核、当前时间

    申请博客有一段时间了,然而到现在还一篇没有写过..... 主要因为没有想到需要写些什么,最近在学习Python语言,照着书上看了看最基础的东西,发现根本看不进去,而且光看的话今天看了觉得都理解懂了,过 ...

  6. c语言各类问题 代码

    定义一个结构体,有两个成员变量,一个整型的n,一个字符型的c,利用结构体类型声明一个具有5个元素的数组,并随机初始化,根据成员变量n进行从小到大排序,然后输出 冒泡排序然后 在输出结构体#includ ...

  7. 宣布在 Azure 镜像库中正式推出 Windows Server 2012 R2 并降低 Windows Azure 的实例定价

    我们今天将宣布两条消息,为使用基础结构服务的客户提供更多选择和成本节约:在镜像库中推出 Windows Server 2012 R2 以及降低 Memory Intensive 计算实例定价. 虚拟机 ...

  8. 基于Visual C++2013拆解世界五百强面试题--题5-自己实现strstr

    请用C语言实现字符串的查找函数strstr, 找到则返回子字符串的地址,没有找到返回为空,请用数组操作与指针操作实现 看到题目想到最简单的方法就是母字符串和子字符串比较,如果不同,将指向母字符串的指针 ...

  9. HDU 1568 Fibonacci

    题解:首先,对于小于10000的斐波那契数,我们直接计算,当大于10000时,用公式,由于只要输出前四位,所以不用考虑浮点数的问题,算出其取log的结果: tmp=(log(sq5/5)+n*log( ...

  10. Winet API 支持HTTPP/SOCKS代理

    源程序 1.Winet API 支持使用IE代理.或者不使用代理.或者使用自定义代理三种方式. 2.使用自定义代理的话,支持HTTP代理,SOCKS代理,但是SOCKS代理不知支持用户名密码,HTTP ...